获取Jquery数据表以在包含输入的表上进行排序 [英] Get Jquery data tables to sort on table that contains inputs

问题描述

我有一张表是静态的< td> 和输入（包裹在td中）< td>< ;输入>< / td> 。

I've got a table that is a mixture of static <td> and inputs (wrapped in td) <td><input></td>.

要排序并过滤数据，使用 Jquery数据表插件唯一的问题是它不会排序< input> 标记它只是将它们留在排序列表的底部（如果您点击它两次，则返回顶部），尽管搜索功能仍然适用于所有单元格。

To sort through and filter the data ive used the Jquery data tables plugin the only problem is that it won't sort the <input> tags it just leaves them at the bottom of the sorted list (or top if you click it twice), although the search function still works on all cells.

有没有办法让数据表识别输入标签内的值，并能够对它们进行排序，我正在寻找使用混合数据，即，一些静态的 td 值（从服务器端的计算产生）和一些输入？

Is there a way to get Data Tables to recognize the values inside of the input tags and be able to sort them, I'm looking to do this with hybrid data, i.e. some static td values (generated from calculations on the server side) and some inputs?

我在这里提出了一个问题的解决方案 - http：// jsfiddle .net / qE2wV / 5 /

I've made a jsfiddle of the problem here - http://jsfiddle.net/qE2wV/5/

推荐答案

尝试编写自定义排序功能，可以检索输入的值if该行已输入其他文本。参见下文

Try writing a custom sorting function which could retrieve value of the input if the row has input else the text. See below,

function getValue(x) {
    if (x.indexOf('input') >= 0) {
        return $(x).val();
    }         
    return x;
}

现在，使用此函数实现如下所示的自定义比较器，

Now, use this function to implement the custom comparator like below,

jQuery.fn.dataTableExt.oSort['cust-txt-asc'] = function (a, b) {
    var x = getValue(a);
    var y = getValue(b);
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['cust-txt-desc'] = function (a, b) {
    var x = getValue(a);
    var y = getValue(b);
    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

使用上述搜索比较器初始化数据表，

Initialize the datatable with the above search comparators,

$('#example').dataTable({"aoColumns": [
        { "sType": "cust-txt" },
        { "sType": "cust-txt" },
        { "sType": "cust-txt" },
        { "sType": "cust-txt" }
    ]});

演示： http://jsfiddle.net/eLTUa/

这篇关于获取Jquery数据表以在包含输入的表上进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！