数据表- api.column().data()调用呈现的列
Datatables - api.column().data() call on rendered column
我的问题是,我试图得到一个"总"行在数据表的底部。我得到了这一行,但我总共得到了0美元。如果我将api.column(4)更改为api.column(3),它将正确地添加列,因此我知道它可以工作。
我认为我的问题是如何获得列索引4(项目总数)的数据。我将data:设为null,因为我通过将成本和数量相乘来呈现数据。所以我不确定为什么api.column(4).data()没有得到呈现的信息。
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
processing: true,
seriverSide: true,
ajax: "DataTables-1.10.0/extensions/Editor-1.3.1/examples/php/test.php?PID=<? echo $PID ?>",
table: "#pexpenses",
fields: [ {
label: "Type:",
name: "tbl_pexpenses.type",
type: "select"
}, {
label: "Cost:",
name: "tbl_pexpenses.cost"
}, {
label: "Quantity:",
name: "tbl_pexpenses.quantity"
}, {
label: "Description:",
name: "tbl_pexpenses.description"
}, {
label: "PEID:",
name: "tbl_pexpenses.PEID",
type: "hidden"
}, {
label: "PID:",
name: "tbl_pexpenses.PID",
def: '<? echo $PID; ?>',
type: "hidden"
}
]
} );
$('#pexpenses').DataTable( {
dom: "Tfrtip",
pageLength: -1,
type: 'POST',
paging: false,
info: false,
idSrc: "tbl_pexpenses.PEID",
ajax: "DataTables-1.10.0/extensions/Editor-1.3.1/examples/php/test.php?PID=<? echo $PID ?>",
columns: [
{ data: "tbl_types.type_desc" },
{ data: "tbl_pexpenses.description" },
{ data: "tbl_pexpenses.cost" },
{ data: "tbl_pexpenses.quantity" },
{ data: null,
render: function ( data, type, row ) {
return (data.tbl_pexpenses.cost*data.tbl_pexpenses.quantity);
} }
],
tableTools: {
sRowSelect: "os",
sSwfPath: "../DataTables-1.10.0/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
aButtons: [
{ sExtends: "editor_create", editor: editor },
{ sExtends: "editor_edit", editor: editor },
{ sExtends: "editor_remove", editor: editor },
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]}
]
},
"order": [[ 0, 'asc' ]],
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(0, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="grouping" ><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
},
initComplete: function ( settings, json ) {
editor.field( 'tbl_pexpenses.type' ).update( json.tbl_types );
},
footerCallback: function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/['$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
data = api.column( 4 ).data();
total = data.length ?
data.reduce( function (a, b) {
return intVal(a) + intVal(b);
} ) :
0;
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+ total
);
}
} );
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 0 && currentOrder[0] === 'asc' ) {
table.order( [ 0, 'desc' ] ).draw();
}
else {
table.order( [ 0, 'asc' ] ).draw();
}
} );
<table id="pexpenses" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Type</th>
<th>Description</th>
<th>Cost</th>
<th>Quantity</th>
<th>Item Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td> </td>
<td> </td>
<td> </td>
<th style="text-align:right">Total:</th>
<th></th>
</tr>
<tr>
<th>Type</th>
<th>Description</th>
<th>Cost</th>
<th>Quantity</th>
<th>Item Total</th>
</tr>
</tfoot>
// Total over all pages
data = api.column( 4 ).cache('search');
total = data.length ?
data.reduce( function (a, b) {
return intVal(a) + intVal(b);
} ) :
0;
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+ total
);
}
} );
});
我必须缓存列以获得正确的数据。
For who need:
var table = $('#abc').DataTable({
"order": [[ 0, "desc" ]],
"ajax": {
"url": "",
"dataSrc": ""
},
"columns": [
{ "data": "date" },
{ "data": "total1" },
{ "data": "total2" },
{ data: function(row, type, set){ return row.total1 - row.total2}},
{ data: function(row, type, set){ return row.total1*0.02}}
],
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Total over all pages
total_column1 = api.column(1, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 1 );
total_column2 = api.column(2, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 0 );
total_column3 = api.column(3, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 0 );
total_column4 = api.column(4, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 0 );
$(api.column(1).footer()).html(total_column1);
$(api.column(2).footer()).html(total_column2);
$(api.column(3).footer()).html(total_column3);
$(api.column(4).footer()).html(total_column4);
},
"columnDefs": [
{"className": "dt-center", "targets": "_all" }
]
});
相关文章:
- jQuery SelectMenu不适用于来自AJAX调用的KNOCKOUT DATA-BINDING
- 为从AJAX调用中utlizes DATA参数的函数定义回调
- 多次调用svg.selectAll(X).data().enter()
- 如何在 D3 中调试 data() 调用
- Angular $http调用不绑定成功$scope.data
- 可以't在发送标头后设置标头.调用create(data,cb)时
- 调用函数onClick,并将元素's的data-*属性
- 为什么我们在从ajax json调用获取响应时使用data.d
- 将参数从Rall.data.ModelFactory.getModel传递给调用方法
- 在不进行HTTP调用的情况下更新Ember Data中的特定记录
- AJAX调用在Header / form-data中返回undefined
- .data('kendoComboBox')从事件处理程序调用时返回undefined
- 如何从表单中提交“multipart/form-data”并让你的函数被调用
- 如何在AngularJS的模板中对data调用函数?
- 我可以在Knockoutjs中的if绑定中访问jquery调用中的$data吗?
- 在执行findQuery emberjs和ember data时取消对api的现有调用
- 数据表- api.column().data()调用呈现的列
- 如何在data-ng-click中传递调用动态方法而不是静态方法(即想要传递要调用的方法而不是固定的delete()方法
- Node.js ReadStream从不调用'data'侦听器
- 为Google登录调用data-onsuccess方法