Click here to Skip to main content
14,869,969 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi Friends,
Paging not working in GRID while i am using DataTable jquery.
Here my code:
// Init Datatables with Tabletools Addon
      $('#datatable').dataTable({
          'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [-1]}],
          'oLanguage': { "oPaginate": { "sPrevious": "", "sNext": ""} },
          'iDisplayLength': 5,
          'aLengthMenu': [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
          'bRetrieve': true,
          'bSort': false,
          'bPaginate': true,
          'bLengthChange': false,
          'bFilter': false,
          'bInfo': false,
          'bAutoWidth': false,
          'sPaginationType':"full_numbers"
      });


<table class="table table-striped table-bordered table-hover" id="datatable">
             <asp:Repeater ID="rptDataImport" runat="server">
             <HeaderTemplate>
               <thead>
                 <tr>
                 <th class="text-center">Employee ID</th>
                   <th class="text-center">First Name</th>
                   <th class="text-center">Last Name</th>
                   <th class="text-center">Companies GroupName</th>
                   <th class="text-center">Job Title</th>
                   <th class="text-center">Work Email</th>
                   <th class="text-center">Import Desc</th>
                 </tr>
               </thead>
               </HeaderTemplate>

               <ItemTemplate>
               <tbody>

                 <tr>
                   <td><%#DataBinder.Eval(Container.DataItem, "EmployeeID")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "FirstName")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "LastName")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "ClientName")%></td><%--Companiesgroup name--%>
                   <td><%#DataBinder.Eval(Container.DataItem, "JobTitle")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "WorkEmail")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "ImportDesc")%></td>
                 </tr>

               </tbody>
               </ItemTemplate>
               </asp:Repeater>
             </table>



<script type="text/javascript" src="vendor/plugins/datatables/js/datatables.js"></script><!-- Datatable Bootstrap Addon -->
XML
<script type="text/javascript" src="vendor/plugins/datatables/extras/TableTools/media/js/TableTools.min.js"></script><!-- Datatable TableTools Addon -->
<script type="text/javascript" src="vendor/plugins/datatables/extras/TableTools/media/js/ZeroClipboard.js"></script><!-- Datatable TableTools Addon
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

 -->
Posted

1 solution

For the Datatables plugin to work, you need to setup the thead and tbody tags correctly.

I would expect your repeater to be declare as follows to render the correct thead and tbody tags:

ASP.NET
<table class="table table-striped table-bordered table-hover" id="datatable">
             <asp:Repeater id="rptDataImport" runat="server">
             <HeaderTemplate>
               <thead>
                 <tr>
                 <th class="text-center">Employee ID</th>
                   <th class="text-center">First Name</th>
                   <th class="text-center">Last Name</th>
                   <th class="text-center">Companies GroupName</th>
                   <th class="text-center">Job Title</th>
                   <th class="text-center">Work Email</th>
                   <th class="text-center">Import Desc</th>
                 </tr>
               </thead>
               <tbody>
              </HeaderTemplate>
 
               <ItemTemplate>
                 <tr>
                   <td><%#DataBinder.Eval(Container.DataItem, "EmployeeID")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "FirstName")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "LastName")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "ClientName")%></td><%--Companiesgroup name--%>
                   <td><%#DataBinder.Eval(Container.DataItem, "JobTitle")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "WorkEmail")%></td>
                   <td><%#DataBinder.Eval(Container.DataItem, "ImportDesc")%></td>
                 </tr>
               </ItemTemplate>
               </asp:Repeater>
               </tbody>
             </table>
   
v4
Comments
lalitha19 5-Jun-14 9:31am
   
Hi, i tried as you said. but it shows "No data available in table". the First ,Last button is displaying. but all the data is display in single page. could you please help me to resolve this issue?
hypermellow 5-Jun-14 9:40am
   
What happens when you strip out all the dataTable options, and initialise the plugin like:
$('#datatable').dataTable();
lalitha19 5-Jun-14 10:00am
   
Hi.. Thanks for your reply. yes i initialised as i specified in this question. but paging not working. all the data displays in same page. and paging display as FIRST 1 NEXT(As buttons).

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