Jquery 分页案例

Bertha 。 2023-08-17 17:17 141阅读 0赞

Jquery    分页案例

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>jquery分页</title>
        <link href="../../Script/plugins/jquery/paginathing/bootstrap.min.css" rel="stylesheet" />
        <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="../../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 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();
            };
    
            function paginathing() {
                $('#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>

[ paginathing.zip][paginathing.zip]

转载于:https://www.cnblogs.com/kikyoqiang/p/11310505.html

[paginathing.zip]: https://files-cdn.cnblogs.com/files/kikyoqiang/paginathing.zip