不同的分页样式

xiaoxiao2021-02-27  260

默认情况下 Datatables 的分页就是上一页、下一页和6个页数按钮,这适合大部分情况。不过也有用户不喜欢这样,Datatables提供了四个模式供用户选择,通过设置pagingType选项来配置

number - 只有只有数字按钮simple - 只有上一页、下一页两个按钮simple_numbers - 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个full - 有四个按钮首页、上一页、下一页、末页full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮first_last_numbers - 除首页、末页两个按钮还有页数按钮

更多分页插件,参考 这里。

ps:DataTables中文网总结了问的最多的是指定页面跳转传送门

下面的例子展示了full_numbers类型的分页

Show  102550 100 entries Search: Name Position Office Age Start date Salary Name Position Office Age Start date Salary Airi SatouAccountantTokyo332008/11/28$162,700 Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000 Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000 Bradley GreerSoftware EngineerLondon412012/10/13$132,000 Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850 Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000 Bruno NashSoftware EngineerLondon382011/05/03$163,500 Caesar VancePre-Sales SupportNew York212011/12/12$106,450 Cara StevensSales AssistantNew York462011/12/06$145,600 Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060 Showing 1 to 10 of 57 entries First Previous 123456 Next Last <!--引入css--><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <!--引入JavaScript--><script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <!--初始化代码--><script> $(document).ready(function() { $('#example').DataTable({ "pagingType": "full_numbers" }); });</script>

https://datatables.net/examples/basic_init/alt_pagination

转载请注明原文地址: https://www.6miu.com/read-12471.html

最新回复(0)