分页在DataTable JQuery中不起作用 [英] Pagination not working inDataTable JQuery
本文介绍了分页在DataTable JQuery中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
朋友，
我使用DataTable jQuery时，分页在GRID中不起作用.
这是我的代码:
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插件->
<script type="text/javascript" src="vendor/plugins/datatables/js/datatables.js"></script><!-- Datatable Bootstrap Addon -->
<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>
-->
推荐答案
('' #datatable'').dataTable({ " aoColumnDefs":[{" bSortable":false，"aTargets":[-1]}]， " oLanguage":{"oPaginate":{"sPrevious":"，"sNext":"}}}， ``iDisplayLength'':5， " aLengthMenu":[[5，10，25，50，-1]，[5，10，25，50，全部"]]， " bRetrieve":是的， ``bSort'':否， " bPaginate":是的， " bLengthChange":否， ``bFilter'':否， " bInfo":false， ``bAutoWidth'':否， " sPaginationType":"full_numbers" });
(''#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插件->
<script type="text/javascript" src="vendor/plugins/datatables/js/datatables.js"></script><!-- Datatable Bootstrap Addon -->
<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>
-->
要使Datatables插件正常工作，您需要正确设置thead和tbody标签.
我希望您的中继器声明如下，以呈现正确的thead和tbody标签:
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:
<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>
这篇关于分页在DataTable JQuery中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
