Question

我有一个表，我想在其中实现服务器端分页。目前我正在做的是我一次性获取整个数据（40-50k记录）并将其分配给一个数组（$ batchesData）并且我已经在其上实现了jquery表分类器的寻呼机插件，这在技术上是错误的，因为它减慢系统速度。

我想实现服务器端分页，其中每页只有10条记录被提取并显示在此库中，但需要一些关于如何继续的线索

这是我的tpl文件的样子

    <table class="table table-striped projects tablesorter" 
           id="batchTable" style="font-size: 13px;">
     <th>
     .....
     .....
     </th>
     <tbody>
     {if !empty($batchesData)}
     {foreach from = $batchesData key = filter item = value}
     <tr>
     ......
     ......
     </tr>
     {/foreach}
      </tbody>
     </table>

寻呼机代码

     <div  style = "margin-left:30%" id="pager" class="tablesorterPager" >
                          <form>
                             <img src="/assets/images/first.png" width = "5%" height = "auto" class="first"/> 
                             <img src="/assets/images/previous.png" width = "5%" height = "auto" class="prev"/>
                             <input type="text" class="pagedisplay"/>
                             <img src="/assets/images/next.png" width = "5%" height = "auto" class="next"/> 
                             <img src="/assets/images/last.png" width = "5%" height = "auto" class="last"/> 
                             <select class="pagesize">
                                <option selected="selected"  value="10">10</option>
                                <option value="5">5 per page</option>
                                <option value="50">50 per page</option>
                                <option value="100">100 per page</option>
                             </select>
                          </form>
                       </div>

Js代码

 /**
 * To sort table columns in asc/desc order in Batch Listing View
 */
$('#batchTable') 
.tablesorter({widthFixed: true, widgets: ['zebra']}) ;

/**
 * To apply pagination in Batch Listing View
 */
$('#batchTable')
.tablesorterPager({container: $("#pager")});

任何线索都将受到高度赞赏

pager.js

    (function($) {
$.extend({
    tablesorterPager: new function() {

        function updatePageDisplay(c) {
            var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);   
        }
        function setPageSize(table,size) {
            var c = table.config;
            c.size = size;
            c.totalPages = Math.ceil(c.totalRows / c.size);
            c.pagerPositionSet = false;
            moveToPage(table);
            fixPosition(table);
        }

        function fixPosition(table) {
            var c = table.config;
            if(!c.pagerPositionSet && c.positionFixed) {
                var c = table.config, o = $(table);
                if(o.offset) {
                    c.container.css({

                        position: 'realtive'
                    });
                }
                c.pagerPositionSet = true;
            }
        }

        function moveToFirstPage(table) {
            var c = table.config;
            c.page = 0;
            moveToPage(table);
        }

        function moveToLastPage(table) {
            var c = table.config;
            c.page = (c.totalPages-1);
            moveToPage(table);
        }

        function moveToNextPage(table) {
            var c = table.config;
            c.page++;
            if(c.page >= (c.totalPages-1)) {
                c.page = (c.totalPages-1);
            }
            moveToPage(table);
        }

        function moveToPrevPage(table) {
            var c = table.config;
            c.page--;
            if(c.page <= 0) {
                c.page = 0;
            }
            moveToPage(table);
        }


        function moveToPage(table) {
            var c = table.config;
            if(c.page < 0 || c.page > (c.totalPages-1)) {
                c.page = 0;
            }

            renderTable(table,c.rowsCopy);
        }

        function renderTable(table,rows) {

            var c = table.config;
            var l = rows.length;
            var s = (c.page * c.size);
            var e = (s + c.size);
            if(e > rows.length ) {
                e = rows.length;
            }


            var tableBody = $(table.tBodies[0]);

            // clear the table body

            $.tablesorter.clearTableBody(table);

            for(var i = s; i < e; i++) {

                //tableBody.append(rows[i]);

                var o = rows[i];
                var l = o.length;
                for(var j=0; j < l; j++) {

                    tableBody[0].appendChild(o[j]);

                }
            }

            fixPosition(table,tableBody);

            $(table).trigger("applyWidgets");

            if( c.page >= c.totalPages ) {
                moveToLastPage(table);
            }

            updatePageDisplay(c);
        }

        this.appender = function(table,rows) {

            var c = table.config;

            c.rowsCopy = rows;
            c.totalRows = rows.length;
            c.totalPages = Math.ceil(c.totalRows / c.size);

            renderTable(table,rows);
        };

        this.defaults = {
            size: 10,
            offset: 0,
            page: 0,
            totalRows: 0,
            totalPages: 0,
            container: null,
            cssNext: '.next',
            cssPrev: '.prev',
            cssFirst: '.first',
            cssLast: '.last',
            cssPageDisplay: '.pagedisplay',
            cssPageSize: '.pagesize',
            seperator: "/",
            positionFixed: true,
            appender: this.appender
        };

        this.construct = function(settings) {

            return this.each(function() {   

                config = $.extend(this.config, $.tablesorterPager.defaults, settings);

                var table = this, pager = config.container;

                $(this).trigger("appendCache");

                config.size = parseInt($(".pagesize",pager).val());

                $(config.cssFirst,pager).click(function() {
                    moveToFirstPage(table);
                    return false;
                });
                $(config.cssNext,pager).click(function() {
                    moveToNextPage(table);
                    return false;
                });
                $(config.cssPrev,pager).click(function() {
                    moveToPrevPage(table);
                    return false;
                });
                $(config.cssLast,pager).click(function() {
                    moveToLastPage(table);
                    return false;
                });
                $(config.cssPageSize,pager).change(function() {
                    setPageSize(table,parseInt($(this).val()));
                    return false;
                });
            });
        };

    }
});
// extend plugin scope
$.fn.extend({
    tablesorterPager: $.tablesorterPager.construct
});

 })(jQuery);

使用过的图书馆 - http://tablesorter.com/docs/ http://tablesorter.com/docs/example-pager.html

使用tablesorter jquery插件寻呼机

0 个答案: