Question

我正在使用jQuery Tablesorter及其寻呼机。我想要做的是使用AJAX为每个页面逐位加载内容。问题是每次加载表时都会发送两个AJAX请求。当我尝试更改下拉菜单中显示的页面时，我收到一个新页面请求，然后我立即获得第一页的另一个AJAX请求，该请求覆盖了内容。一些代码供参考：

$(function(){

// Initialize tablesorter
// ***********************
$("#request-table")
    .tablesorter({
        theme: 'blue',
        widthFixed: true,
        sortLocaleCompare: true, // needed for accented characters in the data
        sortList: [ [0,1] ],
        widgets: ['zebra', 'filter', 'pager'],
    }).tablesorterPager({
        container: $(".pager"),

        // use this url format "http:/mydatabase.com?page={page}&size={size}"
        ajaxUrl: '<?php echo $this->url(); ?>?page={page}&{filterList:filter}&{sortList:column}&size={size}',
        pager_ajaxUrl: 'assets/City{page}.json?{filterList:filter}&{sortList:column}',

        // process ajax so that the data object is returned along with the
        // total number of rows; example:
        // {
        //   "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }],
        //   "total_rows" : 100
        // }
       ajaxProcessing: function(ajax) {
            if (ajax && ajax.hasOwnProperty('data')) {
                $('#request-table')
                            .find('tbody')
                            .empty();
                $(ajax.data).each(function(rowIndex, row) {
                    var tr  = '<tr data-toggle="modal">';
                        tr += '<input type="hidden" class="requestId" data-request-id="' + row['id'] + '"/>' ;

                        tr += '<td>' + row['name'];
                        if(row['message_count'] > 0) {
                            tr += '<span class="badge pull-right">' + row['message_count'] + '</span>';
                        }
                        tr += '</td>';

                        tr += '<td>' + row['start_date'] + '</td>';
                        tr += '<td>' + row['end_date'] + '</td>';

                        tr += '<td class="status" data-status="' + row['status'] + '">' + row['status'] + '</td>';

                        tr += '<td>' + row['is_printed'] + '</td>';

                        tr += '</tr>';
                        $row = $(tr),

                        $('#request-table')
                            .find('tbody')
                            .append($row)
                            .trigger('addRows', [$row]);
                });
            }
            initRequests();
            return [ajax.total_rows];
        },


        // output string - default is '{page}/{totalPages}';
        // possible variables:
        // {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
        output: '{startRow} to {endRow} ({totalRows})',

        // apply disabled classname to the pager arrows when the rows at
        // either extreme is visible - default is true
        updateArrows: true,

        // starting page of the pager (zero based index)
        page: 1,

        // Number of visible rows - default is 10
        size: 100,

        // if true, the table will remain the same height no matter how many
        // records are displayed. The space is made up by an empty
        // table row set to a height to compensate; default is false
        fixedHeight: true,

        // remove rows from the table to speed up the sort of large tables.
        // setting this to false, only hides the non-visible rows; needed
        // if you plan to add/remove rows with the pager enabled.
        removeRows: false,

        // css class names of pager arrows
        // next page arrow
        cssNext: '.next',
        // previous page arrow
        cssPrev: '.prev',
        // go to first page arrow
        cssFirst: '.first',
        // go to last page arrow
        cssLast: '.last',
        // select dropdown to allow choosing a page
        cssGoto: '.gotoPage',
        // location of where the "output" is displayed
        cssPageDisplay: '.pagedisplay',
        // dropdown that sets the "size" option
        cssPageSize: '.pagesize',
        // class added to arrows when at the extremes
        // (i.e. prev/first arrows are "disabled" when on the first page)
        // Note there is no period "." in front of this class name
        cssDisabled: 'disabled'

    });

});

告诉我是否需要更多代码/信息。提前谢谢！

Answer 1

我解决了我的问题。显然，我将结果行附加到表中的部分是一个错误。这是正确的AJAX处理部分：

      ajaxProcessing: function(ajax) {
            if (ajax && ajax.hasOwnProperty('data')) {
                $('#request-table')
                            .find('tbody')
                            .empty();
                    var tr = '';
                $(ajax.data).each(function(rowIndex, row) {
                        tr += '<tr data-toggle="modal">';
                        tr += '<input type="hidden" class="requestId" data-request-id="' + row['id'] + '"/>' ;

                        tr += '<td>' + row['name'];
                        if(row['message_count'] > 0) {
                            tr += '<span class="badge pull-right">' + row['message_count'] + '</span>';
                        }
                        tr += '</td>';

                        tr += '<td>' + row['start_date'] + '</td>';
                        tr += '<td>' + row['end_date'] + '</td>';

                        tr += '<td class="status" data-status="' + row['status'] + '">' + row['status'] + '</td>';

                        tr += '<td>' + row['is_printed'] + '</td>';

                        tr += '</tr>';
                });
            }
            $row = $(tr),
            initRequests();
            return [ajax.total_rows, $row];
        },

我希望这对有其他类似问题的人有所帮助：）

jQuery Tablesorter + pager发送两个AJAX调用

1 个答案: