Click here to Skip to main content
14,920,188 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Dear Friends,

I have binded values from database to table using ajax. i have a problem in pagination at page load. i given 10 rows per page. when i click pagination it executes well. but at page load shows all the rows.

What I have tried:

<script src="Scripts/paginathing.js" type="text/javascript"></script>
<script type="text/javascript">

    jQuery(document).ready(function ($) {        
        $('.table tbody').paginathing({
            perPage: 10,
            insertAfter: '.table'
        });
       
    });
 </script>


function BindGridview() {
       $.ajax({
           type: "POST",
           contentType: "application/json; charset=utf-8",
           url: "Employee.aspx/BindGridview",
           data: "{}",
           dataType: "json",
           success: function (data) {
               var result = data.d;
               $("#tblEmployee").empty();
               for (var i = 0; i < result.length; i++) {
                   $("#tblEmployee").append('<tr><td align="center"></td><td style="display:none;">' + result[i].Id + '</td><td>' + result[i].EmployeeId + '</td><td>' + result[i].EmployeeName + '</td><td>' + result[i].DOJ + '</td><td>' + result[i].Contact + '</td><td>' + result[i].AltContact + '</td><td style="width:30px; text-align:left;"><a href="#" onclick="Edit(' + result[i].Id + ')"></a></td><td style="width:30px; text-align:left;"><a href="#" onclick=Delete(' + result[i].Id + ')></a></td></tr>');
               }
           },
           error: function (data) {
               var r = data.responseText;
               var errorMessage = r.Message;
               alert(errorMessage);
           }
       });
   }
Posted
Updated 31-Jul-17 22:27pm
v3
Comments
Karthik_Mahalingam 1-Aug-17 3:54am
   
show the code for binding the data to the html table.
Vivek.anand34 1-Aug-17 4:23am
   
I updated the what i have tried..

1 solution

add this code at the last line of success event

 success:function(data){
.
.
.
$('.table tbody').paginathing({
            perPage: 10,
            insertAfter: '.table'
        });
},
error:function(data) {
   
Comments
Vivek.anand34 1-Aug-17 4:35am
   
S I added but didn't work..
Karthik_Mahalingam 1-Aug-17 4:37am
   
add inside settimeout

setTimeout(function () {

    $('.table tbody').paginathing({
        perPage: 10,
        insertAfter: '.table'
    });

}, 500);
Vivek.anand34 1-Aug-17 4:53am
   
No.
Karthik_Mahalingam 1-Aug-17 5:01am
   
run in console window and check

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900