HTML

Question

我有一个表格，默认情况下（在页面加载时）应按降序排序价格列。它也应该在单击此列时排序（asc或desc）。

HTML

<div id="table_container">
    <table id="products">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>price</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

JS

 var oTable = $("#products").dataTable({
        "aaData": [
            [1, "car1", "<span class='hidden'><a class='imgLoading' href=''></a></span>$40.50"],
            [2, "car2", "<span class='hidden'><a class='imgLoading' href=''></a></span>$20.91"],
            [3, "car3", "<span class='hidden'><a class='imgLoading' href=''></a></span>$10.00"]
        ],
        "aaSorting":[[3, 'desc']],
        "aoColumns": [{
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": false
        }, {
            "sWidth": "70%",
            "sClass": "center",
            "bSortable": true,
            "sType": "duration"
        }]

    });

有人可以帮我实现吗？。

Answer 1

你快到了：

var oTable = $("#products").dataTable({
    "aaData": [
        [1, "car1", "$40.50"],
        [2, "car2", "$20.91"],
        [3, "car3", "$10.00"]
    ],
    "aaSorting": [
        [2, 'asc']
    ],
    "aoColumns": [{
        "sWidth": "70%",
        "sClass": "center",
        "bSortable": false,
        "sTitle": "id"
    }, {
        "sWidth": "20%",
        "sClass": "center",
        "bSortable": false,
        "sTitle": "name"
    }, {
        "sWidth": "10%",
        "sClass": "center",
        "bSortable": true,
        "sType": "currency",
        "sTitle": "price"
    }]
});

并添加货币插件，将您的HTML更改为：

<div id="table_container">
    <table id="products"></table>
</div>

要记住的是，目标是0，因此你的目标3不存在，你需要目标2（id = 0，name = 1＆amp; price = 2）。希望有所帮助。

已编辑JSFiddle

基本上你需要让DataTables做更多的工作，并且用HTML传递它不是创建单元格的最佳方法，你可以让它为你做到这一点：

$.extend($.fn.dataTableExt.oSort, {
    "dom_currency-pre": function(a) {
        a = $(a).text();
        a = (a === "-") ? 0 : a.replace(/[^\d\-\.]/g, "");
        return parseFloat(a);
    },
    "dom_currency-asc": function(a, b) {
        return a - b;
    },
    "dom_currency-desc": function(a, b) {
        return b - a;
    }
});
var oTable = $("#products").dataTable({
    "aaData": [
        [1, "car1", "$40.50"],
        [2, "car2", "$20.91"],
        [3, "car3", "$10.00"]
    ],
    "aaSorting": [
        [2, 'desc']
    ],
    "aoColumns": [{
        "sWidth": "70%",
        "sClass": "center",
        "bSortable": false,
        "sTitle": "id"
    }, {
        "sWidth": "20%",
        "sClass": "center",
        "bSortable": false,
        "sTitle": "name"
    }, {
        "sWidth": "10%",
        "sClass": "center",
        "bSortable": true,
        "sType": "dom_currency",
        "sTitle": "price",
        "mRender": function(data, type, row) {
            return '<span><span class="hidden"><a class="imgLoading" href="#"></a></span>' + data + '</span>';
        }
    }]
});

希望有所帮助。

Answer 2

您应该导入数据表的货币插件，并在第2列中添加类型currency（记住从0开始）。

货币插件的更多信息：https://datatables.net/plug-ins/sorting/currency

正在努力!!!

  var oTable = $("#products").dataTable({
    "aaData": [
        [1, "car1", "<span class='hidden'><a class='imgLoading' href=''></a></span>$40.50"],
        [2, "car2", "<span class='hidden'><a class='imgLoading' href=''></a></span>$20.91"],
        [3, "car3", "<span class='hidden'><a class='imgLoading' href=''></a></span>$10.00"]
    ],
    "aaSorting":[[2, 'desc']],
    "aoColumns": [{
        "sWidth": "70%",
        "sClass": "center",
        "bSortable": false
    }, {
        "sWidth": "70%",
        "sClass": "center",
        "bSortable": false
    }, {
        "sWidth": "70%",
        "sClass": "center",
        "bSortable": true,
        "sType": "currency"
    }]

});

结果：http://jsfiddle.net/cmedina/4uLsoxp0/2/

如何使用jQuery数据表实现自定义默认排序

HTML

JS

2 个答案: