不同的分页样式

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

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

更多分页插件,参考 这里

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

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

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
 
  1. <!--引入css-->
  2. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
  3.  
  4. <!--引入JavaScript-->
  5. <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
  6. <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
  7.  
  8. <!--初始化代码-->
  9. <script>
  10. $(document).ready(function() {
  11. $('#example').DataTable({
  12. "pagingType": "full_numbers"
  13. });
  14. });
  15. </script>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值