javascript Datatable.js如何根据前一列显示值

时间:2012-10-10 19:31:50

标签: javascript jquery-datatables

我正在使用datatables.net中的datatables.js并尝试显示基于prev col的列。就像prev col已经获得了价值< 0然后是其他CR。

我尝试过以下脚本:

$(document).ready(function() {
    var oTable = $('#transaction-list-results').dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "sAjaxSource": "ajax/transactions.php",
    "aaSorting": [[0, 'asc']],
    "bAutoWidth": false,
        "aoColumns": [
            { "mData": "ref_no", 'sWidth': '100px' },
            { "mData": "date", 'sWidth': '100px', "mRender": function(data, type, row){return localizeDateStr(data);}},
            { "mData": "desc", 'sWidth': '300px' },
            { "mData": "amount", 'sWidth': '75px', "sCalss": 'amount' },
        { "mData": "depo", 'sWidth': '75px', "mRender": function(data, type, row){return data;}},
        { "mData": "width", 'sWidth': '75px', "mRender": function(data, type, row){return data;}},
        { "mData": "transfer", 'sWidth': '75px', "mRender": function(data, type, row){return data;}}
        ]
    } );
} );

我的transaction.php文件的结果:

{"aaData":[{"ref_no":"4345643532","date":"2012-10-09T17:36:28Z","desc":"Western Union","amount":-50,"depo":"","width":"","transfer":""},{"ref_no":"4324","date":"2012-10-09T17:28:06Z","desc":"123","amount":-10,"depo":"","width":"","transfer":""},{"ref_no":"4324","date":"2012-10-09T17:27:48Z","desc":"123","amount":3.45,"depo":"","width":"","transfer":""},{"ref_no":"123","date":"2012-10-05T20:56:11Z","desc":"abc","amount":10,"depo":"","width":"","transfer":""},{"ref_no":"12","date":"2012-10-01T16:47:19Z","desc":"autorefill","amount":2000,"depo":"","width":"","transfer":""}]}

1 个答案:

答案 0 :(得分:1)

所以,你实际上已经在这里使用了一些应该有用的功能。

mRender将允许您呈现在aoColumns定义中定义的特定列中显示的数据。您正确地为函数标记了三个参数:

  • data(单元格的数据,基于mData密钥)
  • type
  • row(整行的数据集)

所以你可以这样做:

...
"mRender": function(data, type, row) {
    var valueToCompare = row.someOtherCell
        returnValue = data;

    if (data > valueToCompare) { // or some similar logic
        returnValue = somethingElse;
    }

    return returnValue;
}
...

另外,作为旁注 - 您只需多次使用mRender即可返回data。如果您没有操纵该值,则没有必要 - 这通过简单地设置mData属性来隐式完成。