如何使用jQuery datatable实现自定义默认排序

我有一个表，其中price列在默认情况下（页面加载时）应该按降序排序。单击此列时，还应进行排序（asc或desc）

这是你的电话号码

HTML

身份证件
名称
价格

JS

var-oTable=$（“#产品”）.dataTable({
“aaData”：[
[1，“car1”，“40.50美元]，
[2，“car2”，“20.91美元]，
[3，“car3”，“10.00美元”]
],
“aaSorting”：[[3，'说明]]，
“aoColumns”：[{
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：false
}, {
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：false
}, {
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：是的，
“sType”：“持续时间”
}]
});

有谁能帮我实现这一点吗？

你就快到了：

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，price=2）。希望有帮助

编辑

基本上，您需要让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>';
        }
    }]
});

$.extend（$.fn.dataTableExt.oSort{
“dom_currency-pre”：功能（a）{
a=$（a.text（）；
a=（a==“-”）？0:a.replace（/[^\d\-\.]/g，”）；
返回（a）；
},
“dom_currency-asc”：功能（a、b）{
返回a-b；
},
“dom_currency-desc”：函数（a、b）{
返回b-a；
}
});
var oTable=$（“#产品”）.dataTable({
“aaData”：[
[1，“car1”，“40.50美元]，
[2，“car2”，“20.91美元]，
[3，“car3”，“10.00美元”]
],
“aaSorting”：[
[2，‘描述’]
],
“aoColumns”：[{
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：错误，
“针”：“id”
}, {
“瑞士”：“20%”，
“sClass”：“中心”，
“可移植”：错误，
“针”：“名称”
}, {
“瑞士”：“10%”，
“sClass”：“中心”，
“可移植”：是的，
“sType”：“dom_货币”，
“缝线”：“价格”，
“mRender”：函数（数据、类型、行）{
返回“”+数据+“”；
}
}]
});

希望这能有所帮助。

您就快到了：

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，price=2）。希望有帮助

编辑

基本上，您需要让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>';
        }
    }]
});

$.extend（$.fn.dataTableExt.oSort{
“dom_currency-pre”：功能（a）{
a=$（a.text（）；
a=（a==“-”）？0:a.replace（/[^\d\-\.]/g，”）；
返回（a）；
},
“dom_currency-asc”：功能（a、b）{
返回a-b；
},
“dom_currency-desc”：函数（a、b）{
返回b-a；
}
});
var oTable=$（“#产品”）.dataTable({
“aaData”：[
[1，“car1”，“40.50美元]，
[2，“car2”，“20.91美元]，
[3，“car3”，“10.00美元”]
],
“aaSorting”：[
[2，‘描述’]
],
“aoColumns”：[{
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：错误，
“针”：“id”
}, {
“瑞士”：“20%”，
“sClass”：“中心”，
“可移植”：错误，
“针”：“名称”
}, {
“瑞士”：“10%”，
“sClass”：“中心”，
“可移植”：是的，
“sType”：“dom_货币”，
“缝线”：“价格”，
“mRender”：函数（数据、类型、行）{
返回“”+数据+“”；
}
}]
});

---

希望对您有所帮助。

您应该导入datatable的currency插件，并在第2列中添加类型

currency

（请记住从0开始）

有关货币插件的更多信息：

它在工作

  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"
    }]

});

var-oTable=$（“#产品”）.dataTable({
“aaData”：[
[1，“car1”，“40.50美元]，
[2，“car2”，“20.91美元]，
[3，“car3”，“10.00美元”]
],
“aaSorting”：[[2，'说明]]，
“aoColumns”：[{
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：false
}, {
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：false
}, {
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：是的，
“sType”：“货币”
}]
});

---

结果：

您应该导入datatable的currency插件，并在第2列中添加type

currency

（记住从0开始）

有关货币插件的更多信息：

它在工作

  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"
    }]

});

var-oTable=$（“#产品”）.dataTable({
“aaData”：[
[1，“car1”，“40.50美元]，
[2，“car2”，“20.91美元]，
[3，“car3”，“10.00美元”]
],
“aaSorting”：[[2，'说明]]，
“aoColumns”：[{
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：false
}, {
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：false
}, {
“瑞士”：“70%”，
“sClass”：“中心”，
“可移植”：是的，
“sType”：“货币”
}]
});

---

结果：

我已编辑了我的实际问题。列price将始终具有类似“”的html标记。请考虑这个问题。使用JSFIDLE提供解决方案将不胜感激。编辑我的答案，如果您在回答问题后不编辑问题，将非常有用。我已经编辑了我的实际问题。列price将始终具有类似“”的html标记。请考虑这个问题。使用JSFIDLE提供解决方案将是