Php 使用tablesorter jquery插件pager添加ajax级分页

我有一个表，我想在其中实现服务器端分页。 目前，我正在做的是一次性获取整个数据（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>

 /**
 * 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);                

（函数（$）{
$扩展({
TableSorterPage:新函数（）{
函数updatePageDisplay（c）{
var s=$（c.cssPageDisplay，c.container）.val（（c.page+1）+c.separator+c.totalPages）；
}
函数setPageSize（表，大小）{
var c=table.config；
c、 大小=大小；
c、 totalPages=Math.ceil（c.totalRows/c.size）；
c、 pagerPositionSet=false；
移动页面（表格）；
固定位置（表）；
}
功能定位（表）{
var c=table.config；
如果（！c.pagerPositionSet&&c.positionFixed）{
var c=table.config，o=$（table）；
如果（o.偏移）{
c、 container.css({
职位：'房地产'
});
}
c、 pagerPositionSet=true；
}
}
函数moveToFirstPage（表）{
var c=table.config；
c、 page=0；
移动页面（表格）；
}
函数moveToLastPage（表）{
var c=table.config；
c、 第页=（c.totalPages-1）；
移动页面（表格）；
}
函数moveToNextPage（表）{
var c=table.config；
c、 page++；
如果（c.page>=（c.totalPages-1））{
c、 第页=（c.totalPages-1）；
}
移动页面（表格）；
}
函数moveToPrevPage（表）{
var c=table.config；
c、 第页--；
如果（共页（共页第1页））{
c、 page=0；
}
可渲染（表，c.rowsCopy）；
}
函数可渲染（表、行）{
var c=table.config；
var l=行数。长度；
var s=（c.page*c.size）；
变量e=（s+c.size）；
如果（e>rows.length）{
e=行数。长度；
}
var tableBody=$（table.tBodies[0]）；
//清理桌面
$.tablesorter.clearTableBody（表）；
对于（var i=s；i=c.totalPages）{
移动至最后一页（表格）；
}
updatePageDisplay（c）；
}
this.appender=函数（表，行）{
var c=table.config；
c、 行=行；
c、 totalRows=rows.length；
c、 totalPages=Math.ceil（c.totalRows/c.size）；
可渲染（表格、行）；
};
这是默认值={
尺寸：10，
偏移量：0，
页码：0，
总计行数：0，
总页数：0，
容器：null，
cssNext:“.next”，
cssPrev:“.prev”，
cssFirst:“.第一”，
cssLast:“.last”，
cssPageDisplay:“.pagedisplay”，
cssPageSize:“.pagesize”，
分隔符：“/”，
是的，
appender：这个是appender
};
this.construct=函数（设置）{
返回此.each（函数（）{
config=$.extend（this.config、$.tablesorterpage.defaults、settings）；
var table=this，pager=config.container；
$（this.trigger（“appendCache”）；
config.size=parseInt（$（“.pagesize”，pager.val（））；
$（config.cssFirst，pager）。单击（函数（）{
移动到第一页（表）；
返回false；
});
$（config.cssNext，pager）。单击（函数（）{
moveToNextPage（表）；
返回false；
});
$（config.cssPrev，pager）。单击（函数（）{
moveToPrevPage（表格）；
返回false；
});
$（config.csslat，pager）。单击（函数（）{
移动至最后一页（表格）；
返回false；
});
$（config.cssPageSize，pager）.change（function（）{
setPageSize（表，parseInt（$（this）.val（））；
返回false；
});
});
};
}
});
//扩展插件范围
$.fn.extend({
tablesorterPager:$.tablesorterPager.construct
});
})（jQuery）；

所用图书馆-

---

您反对使用其他插件吗？我认为DataTables可能是这方面的100%最佳解决方案，它可以处理开箱即用的ajax处理，并且通常比构建基础更高效。不，我不反对使用其他插件，只是想知道如何用这个插件实现同样的功能谢谢你的建议，我也会尝试DataTables