Question

我在使用tablesorter实现服务器端分页时遇到了麻烦。

我从服务器读取json数据，但是有太多记录可以同时获取整个数据集，所以我需要减少服务器端分页的加载时间。

我的第一个实现（使用客户端分页）从服务器读取json数据并构建包含所有数据的html表，然后寻呼机初始化完成其余的工作。基本上说json数据是由一个自定义函数读取的，该函数以递归方式构建表，包含我需要的所有选项和内部数据：我有20多个文件显示，我需要添加css类，处理程序和装饰，具体取决于一些我从上下文得到的参数，所以我不能只写一个静态表，让tablesorter来处理它。

我猜我的常见情况，但我想知道如何使用服务器端分页做同样的事情。当然，我必须摆脱当前管理整个数据集的自定义函数并写入实际的表。如何在服务器端分页模式下对寻呼机插件发出的每个请求应用相同的概念（比如转换函数）？从文档中我想这个角色需要ajaxProcessing绑定功能，但我不能使它工作，我真的不知道如何实现我之前实现的相同结果。

为了澄清我需要的东西，我粘贴我提到的函数，构建表并绑定来自json的数据。同样，在tablesorter初始化之前调用此函数，它的工作是编写数据和设置属性，类和绑定，以实现我的应用程序应该做的任何事情：

// This function creates a standard table with column/rows
// Parameter Information
// objArray = Anytype of object array, like JSON results
// tableId = Id of the container of the table (not a table element itself!)
// dateColumns = String array containing names of date fields (for formatting parser) - case insensitive
// orderedFields = String array containing field names ordered as requested - case sensitive
// readOnly = boolean, defines whether a particular field has to be shown in readonly o read/write mode
function CreateTableOrderedView(objArray, tableId, dateColumns, orderedFields, readOnly) {
    // If the returned data is an object do nothing, else try to parse
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = '<table id="' + tableId + '" class="tablesorter tablesorter-blue">';

    // table head
    str += '<thead><tr class="tablesorter-headerRow" role="row">';
    for (var index = 0; index < orderedFields.length; index++) {
        str += ($.inArray(orderedFields[index].toUpperCase(), dateColumns) == -1 ? '<th scope="col" class="' + orderedFields[index].toUpperCase() + '">' + orderedFields[index] + '</th>' : '<th scope="col" class="' + orderedFields[index].toUpperCase() + ' sorter-ddmmyy">' + orderedFields[index] + '</th>');
    }
    str += '</tr></thead>';

    // table body
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += '<tr>';
        for (var column = 0; column < orderedFields.length; column++) {
            //If the current field is the one that can be edited (this piece of information has to be added to the function parameters list) and it's not in readonly mode, add some handlers to correctly handle contentEditable selections and empty data
            if (orderedFields[column].toUpperCase() != 'ACTIVATIONDATE' || readOnly)
                str += '<td class="' + orderedFields[column].toUpperCase() + '"><div>' + (eval('array[i].' + orderedFields[column]) != null ? eval('array[i].' + orderedFields[column]) : '') + '</div></td>';
            else
                str += '<td class="' + orderedFields[column].toUpperCase() + '"><div ' + (eval('array[i].' + orderedFields[column]) != null ? '' : 'class="emptyPlaceholder"') + 'onmouseup="javascript:SelectActivationDateText(this);" onblur="javascript:RestoreCellStyle(this);">' + (eval('array[i].' + orderedFields[column]) != null ? eval('array[i].' + orderedFields[column]) : emptyTextString) + '</div></td>';
        }
        str += '</tr>';
    }
    str += '</tbody>';
    str += '</table>';

    return str;
}

我希望获得针对所请求的每个页面应用这些规则的类似结果，这样每次我可以设置可见行的行为就像它们在客户端分页实现中那样，但是我很难理解我应该这样做。

提前感谢您的帮助。

Answer 1

我自己找到了我一直在寻找的东西。

基本上，为了实现我在服务器端分页方案中使用引用函数所做的事情，您必须实现一个处理程序来绑定到tablesorterPager设置中的ajaxProcessing属性。在此函数中，您可以将数据绑定到表格单元格，但您也可以选择控制表格标记本身并根据需要对其进行自定义。

在this question上可以找到一个实现该函数以获得与我在上一篇文章中引用的结果非常相似的结果的示例。

在tablesorter上实现基本服务器分页

1 个答案: