Jquery 分页案例
Jquery 分页案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jquery分页</title> <link href="../../Script/plugins/jquery/paginathing/bootstrap.min.css" rel="stylesheet" /> <!-- 新 Bootstrap 核心 CSS 文件 --> <!--<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">--> <style> .Pagination { width: 1000px; } </style> </head> <body> <div style="width:80%"> <table id="article_list" cellspacing="0" class="table table-small-font table-bordered table-striped"> <thead> <tr> <th data-priority="1"> 编号 </th> <th data-priority="1"> 城市 </th> </tr> </thead> <tbody id="contentTbody"></tbody> </table> <div class="setPageDiv"> <div class="Pagination" id="pagination"></div> </div> </div> <!--<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>--> <script src="../../Script/plugins/jquery/jquery-1.9.1.min.js"></script> <script src="../../Script/plugins/jquery/paginathing/paginathing.js"></script> <script src="../../Script/plugins/0com/template-simple.js"></script> <script src="https://files.cnblogs.com/files/kikyoqiang/silence.min.js"></script> <script id="test" type="text/html"> {{each list as item}} <tr> <td>{{item.name}}</td> <td>{{item.value}}</td> <tr> {{/each}} </script> <script type="text/javascript"> $(function () { SelectLoadTable(); }); function SelectLoadTable() { var str = "[ { name: '1', value: '0' }, { name: '6101', value: '北京市' }, { name: '6102', value: '天津市' }," + "{ name: '6103', value: '上海市' }, { name: '6104', value: '重庆市' }, { name: '6105', value: '渭南市' }," + "{ name: '6106', value: '延安市1' }, { name: '6107', value: '汉中市1' }, { name: '6108', value: '榆林市1' }," + "{ name: '6106', value: '延安市2' }, { name: '6107', value: '汉中市2' }, { name: '6108', value: '榆林市2' }," + "{ name: '6106', value: '延安市3' }, { name: '6107', value: '汉中市3' }, { name: '6108', value: '榆林市3' }," + "{ name: '6106', value: '延安市4' }, { name: '6107', value: '汉中市4' }, { name: '6108', value: '榆林市4' }," + "{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," + "{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," + "{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," + "{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," + "{ name: '6106', value: '延安市5' }, { name: '6107', value: '汉中市5' }, { name: '6108', value: '榆林市5' }," + "{ name: '6109', value: '安康市' }, { name: '6110', value: '商洛市' }]"; //var strs = JSON.parse(str); var strs = eval('(' + str + ')'); var html = template("test", { list: strs }); $("#contentTbody").html(html); paginathing("contentTbody", 'Pagination', 5); }; function paginathing(contentTbodyId, containerClass, limitPagination) { $("#" + contentTbodyId).paginathing({ perPage: 10, // 每页显示的记录数。 limitPagination: limitPagination, // 可以是false或一个数值。用于限制分页的页码。 prevNext: true, // 是否允许显示前一页按钮。 firstLast: true, // 是否允许显示第一页和最后一页按钮。 prevText: '«', // 前一页按钮上显示的文字。 nextText: '»', // 下一页按钮上显示的文字。 firstText: '首页', // 第一页按钮上显示的文字。 lastText: '末页', // 最后一页按钮上显示的文字。 containerClass: containerClass, // 容器的class名称。 ulClass: 'pagination', // ul元素的class名称。 liClass: 'page', // li元素的class名称。 activeClass: 'active', // 当前分页按钮的class名称。 disabledClass: 'disable', // 被禁用的分页按钮的class名称。 insertAfter: null, //键分页传入到指定的元素之后，可以是null，或一个class名称，或一个id。 pageNumbers: true // 显示总页数，limitPagination参数必须设置为true。 }); } //function paginathing(contentTbody) { // $('#' + contentTbody).paginathing({ // perPage: 6, // show item per page 实际为每页6/2=3行数据 // limitPagination: 5, // false or number. Limiting your pagination number. // prevNext: true, // enable previous and next button // firstLast: true, // enable first and last button // prevText: '«', // Previous button text // nextText: '»', // Next button text // firstText: '首页', // "First button" text // lastText: '末页', // "Last button" text // containerClass: 'Pagination', // extend default container class // ulClass: 'pagination', // extend default ul class // liClass: 'page', // extend li class // activeClass: 'active', // active link class // disabledClass: 'disable', // disabled link class, // insertAfter: null, //class or id (eg: .element or #element). append the paginator after certain element // pageNumbers: true // showing current page number of total pages number, to work properly limitPagination must be true // }); //} /* perPage：每页显示的记录数。 limitPagination：可以是false或一个数值。用于限制分页的页码。 prevNext：是否允许显示前一页按钮。 firstLast：是否允许显示第一页和最后一页按钮。 prevText：前一页按钮上显示的文字。 nextText：下一页按钮上显示的文字。 firstText：第一页按钮上显示的文字。 lastText：最后一页按钮上显示的文字。 containerClass：容器的class名称。 ulClass：ul元素的class名称。 liClass：li元素的class名称。 activeClass：当前分页按钮的class名称。 disabledClass：被禁用的分页按钮的class名称。 insertAfter：键分页传入到指定的元素之后，可以是null，或一个class名称，或一个id。 pageNumbers：显示总页数，limitPagination参数必须设置为true。 */ </script> </body> </html>
