所有页面上的DataTables管道总数

时间:2017-07-24 12:25:01

标签: javascript jquery datatables

我已经在我的页面上实现了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个entires,而不是缓存中的完整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

2 个答案:

答案 0 :(得分: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']);

您可以为其他列添加类似的属性,例如col2Totalcol3Total等。

答案 1 :(得分:-1)

要使用ajax响应中的值更新表外的字段,请使用similar question引用Idham对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);
    },
});