所有页面上的 DataTables 管道总数

Question

我已经在我的页面上实现了 pipelining example 的 DataTables，我想知道我应该如何访问返回给浏览器的 json_encode 值

我想计算特定列的返回值的总和，以便我可以将其作为所有页面的总和显示给用户。

我的 jquery 代码

table = $('#table').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": $.fn.dataTable.pipeline( {
        url: "<?php echo site_url('test/proj_time_spent')?>/" + projectNum +"/" + VO,
        pages: 6 // number of pages to cache
    } ),

    "footerCallback": function () {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i = (Number(i.substr(i.indexOf(">")+1,2))* 3600 + Number(i.substr(i.indexOf(":") + 1,2)) *60 ) / 3600:
                typeof i === 'number' ?
                    i : 0;
        };

        var pageTotal;
        var colTotal;

        for($i = 4; $i <= 4; $i++){
        // Total over this page
        pageTotal = api
            .column( $i, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over all pages
        // still returns the same value as the page total above
        colTotal = api
            .column( $i) 
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer of Value
        $( api.column( $i ).footer() ).html(
            pageTotal.toFixed(1) + ' hours <br>(' + colTotal.toFixed(1) + ' hours)' 
        );
        }
    }
} );
} );

现在我对代码有点感兴趣，我看到 DataTables 只是使用页面上的 10 个整体，而不是缓存中返回的完整 xhr 数据。

编辑我的答案

我将页数设置为 1000，因此绘制的记录数为 1000x10 = 10000，但我的记录将少于 10000。

// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
//
$.fn.dataTable.pipeline = function ( opts ) { ...

//rest of code for pipeline example
....
settings.jqXHR = $.ajax( {
            "type":     conf.method,
            "url":      conf.url,
            "data":     request,
            "dataType": "json",
            "cache":    false,
            "success":  function ( json ) {
                cacheLastJson = $.extend(true, {}, json);
                chart_data = cacheLastJson;
                if ( cacheLower != drawStart ) {
                    json.data.splice( 0, drawStart-cacheLower );
                }
                if ( requestLength >= -1 ) {
                    json.data.splice( requestLength, json.data.length );
                }
                colTotal = 0;
                records = (cacheLastJson.recordsTotal !== cacheLastJson.recordsFiltered)? cacheLastJson.recordsFiltered : cacheLastJson.recordsTotal;
                for ( var i = 0; i < records; i++){

                    colTotal += (Number(cacheLastJson.data[i][4].substr(-5,2))*3600 + Number(cacheLastJson.data[i][4].substr(-2,2))*60)/3600;
                }

                drawCallback( json );
            }
        } );

//remainder of code from example

Answer 1

在服务器端处理模式下，任何时候都只有部分数据可用。因此，您将无法使用column().data() API 方法计算总值。

相反，您需要计算服务器上所有页面的总值并在 Ajax 响应中返回，请参阅下面显示的示例响应中的 col1Total。

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "col1Total": 999,
    "data": [
    ]
}

然后您将能够使用ajax.json() API 方法访问这些数据。

var json = table.ajax.json();
console.log(json['col1Total']);

您可以为其他列添加类似的属性，例如col2Total、col3Total 等。

Answer 2

要使用 ajax 响应中的值更新表外的字段，请参考 Idham 对 similar question 的回答，使用 drawCallback 给出了适当的解决方案

var myTable = $('#myTable').DataTable( {
    "serverSide": true,
    "ajax": { 
        "url" : "/response.php",
        "method" : "POST"
    },
    "drawCallback": function (settings) { 
        // Here the response
        var response = settings.json;
        console.log(response);
    },
});