jQuery DataTables搜索列是一个复选框

Question

我在我的一张桌子上使用jQuery DataTables Individual Column Searching，其中一个列包含复选框。

HTML

<table id="NewTable" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th class="col-sm-1 text-center ">
                @Html.DisplayNameFor(model => model.c_AMake.AMake)
            </th>
            <th class="text-center col-sm-1">
                @Html.DisplayNameFor(model => model.Model)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Test)
            </th>
        </tr>
    </thead>
    <tfoot id="NewTable-Foot" style="display: table-header-group">
        <tr>
            <th class="col-sm-1 text-center ">
                @Html.DisplayNameFor(model => model.c_AMake.AMake)
            </th>
            <th class="text-center col-sm-1">
                @Html.DisplayNameFor(model => model.Model)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Test)
            </th>
        </tr>
    </tfoot>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.c_AMake.AMake)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Model)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Test)
            </td>
        </tr>
    }
</table>

jQuery的

var newTable = $('#NewTable tfoot th').length;

// Setup - add a text input to each footer cell
$("#NewTable tfoot th").each(function (index) {
    if (index !== newTable - 1) {
        var title = $(this).text().trim();
        $(this).html('<input type="text" class="form-control" placeholder="' + title + '"/>');
    }
});

var newDTTable = $('#NewTable').DataTable();

newDTTable.columns().every(function () {
    var that = this;
    console.log(this.data());
    $('input', this.footer()).on('keyup change',
        function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
});

这会显示我所说的列，如下所示：

但是，如果我开始在文本框中键入“True”...我的表刷新说“找不到匹配的记录”。很公平，因为复选框在HTML渲染方面没有“true”值，而只是说`checked =“checked”。

但作为一个论点，当我做console.log(this.data())时，我看到表中的每一行，这些值又回来为“真”，“假”，“假”。

有没有办法搜索通过jQuery数据表检查或取消选中的复选框？

UPDATE

以下是我创建搜索框的方式：

$("#NewTable tfoot th").each(function (index) {
    if (index !== newTable - 1) {
        var title = $(this).text().trim();
        $(this).html('<input type="text" class="form-control" placeholder="' + title + '"/>');
    }
});

更新2

var newDTTable = $('#NewTable').DataTable({
    dom: 'Bfrtip',
    buttons: [
    {
        extend: 'excel',
        exportOptions: {
            columns: ':not(:last-child)'
        }
    }],
    aoColumnDefs: [
        {
            "render": function (data, type, row) {
                if (data.indexOf("checked") > -1) {
                    return data + "<input type='hidden' value='True' />";
                }
                else return data + "<input type='hidden' value='False' />";
            },
            "targets": 5
        },
        { "bSortable": false, "aTargets": [2, 18] },
        { "bSearchable": false, "aTargets": [4,7,8,9,10,11,12,13,14,15,16,17,18] }
    ]
});

newDTTable.columns().every(function (colIdx) {
    var that = this;
    console.log(this.data());
    $('input', this.footer()).on('keyup change',
        function() {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
});

这是我的数据表的定义/创建..有一些隐藏的列在这个问题的上下文中无关紧要。

Answer 1

我创造了（实际上是同类的;））这里的小提琴：http://jsfiddle.net/gk67srwb/2/

基本技巧是在呈现复选框列时将隐藏的输入字段附加到复选框：

var table = $('#example').DataTable({
    "columnDefs": [
        {
            "render": function ( data, type, row ) {
            console.log(data);
            if(data === "True"){
                return "<input type='checkbox' checked disabled /><input type='hidden' value='" + data + "' />";
                }
                else return "<input type='checkbox' disabled /><input type='hidden' value='" + data + "' />";
            },
            "targets": 2
        }
        ]
});

现在，当您在列搜索框中输入true // false时，将相应地过滤行。当然，您可以为隐藏字段提供更方便的值（0/1）或创建下拉列表/复选框。

希望这对你有所帮助！

Answer 2

也许这个？

var newTable = $('#NewTable tfoot th').length;

// Setup - add a text input to each footer cell
$("#NewTable tfoot th").each(function (index) {
    if (index !== newTable - 1) {
        var title = $(this).text().trim();
        if(title=='Test'){
            var html = '<select class="form-control">';
            html += "<option value='' selected>Any</option>"
            html += "<option value='checked' selected>True</option>"
            html += "<option value='box"+'"'+">' selected>False</option>"
            html += "</select>"
            $(this).html(html)
        }else
            $(this).html('<input type="text" class="form-control" placeholder="' + title + '"/>');
    }
});
var newDTTable = $('#NewTable').DataTable();

newDTTable.columns().every(function () {
    var that = this;
    console.log(this.data());
    $('input, select', this.footer()).on('keyup change',
        function () {
            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }
        });
});

Answer 3

您可能会在此example中看到，如果表格单元格与普通文本不同，则需要在数据表中定义表格单元格的类型。

无论如何，您可以始终应用自定义过滤器。

假设您在第一列中有select元素。你需要：

全局变量或类似的东西来保存当前搜索框的索引
将此值保存在输入而不是键盘更改事件上。这只是为了调用自定义搜索一次。
在自定义搜索功能中，您需要测试您是否在第一列上执行操作，因此应用自定义搜索。

我使用的是示例表而不是您的表。这应该不是问题。这只是描述如何解决问题的一种方法。

片段：

var newTable = $('#NewTable tfoot th').length;
//
// added new variable
//
var selectedIdx;

// Setup - add a text input to each footer cell
$("#NewTable tfoot th").each(function (index) {
    if (index !== newTable - 1) {
        var title = $(this).text().trim();
        $(this).html('<input type="text" class="form-control" placeholder="' + title + '"/>');
    }
});

var newDTTable = $('#NewTable').DataTable();

newDTTable.columns().every(function () {
    var that = this;
    //
    // changed the events from keyup change to input
    //
    $('input', this.footer()).on('input', function (e) {
        //
        // save current search input index...
        //
        selectedIdx = that.footer().cellIndex;
        //
        // call the custom filter....
        //
        newDTTable.draw(false);
    });
});
$.fn.dataTableExt.afnFiltering.push(
        //
        // custom filter .....
        //
        function (oSettings, aData, iDataIndex) {
            var column = newDTTable.column(selectedIdx);
            var footer_txt = $('input', column.footer()).val();
            var cell_data = aData[selectedIdx];
            //
            // if filtering on the select option column get current value of the select box
            //
            if (selectedIdx == 0) {
                cell_data = $(oSettings.aoData[iDataIndex]
                        .anCells[selectedIdx]).find(':checked').is(":checked");
                if (footer_txt.toUpperCase().charAt(0) == 'T') {
                    footer_txt = true;
                } else {
                    if (footer_txt.toUpperCase().charAt(0) == 'F') {
                        footer_txt = false;
                    } else {
                        footer_txt = undefined;
                    }
                }
                //
                // searching on checkbox.......
                //
                return (footer_txt == undefined) ? true : footer_txt == cell_data;
            }

            //
            // search....
            //
            return cell_data.search(footer_txt) >= 0;
        }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


<table id="NewTable" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>test</th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>test</th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox"></td>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox"></td>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>San Francisco</td>
        <td>66</td>
        <td>2009/01/12</td>
        <td>$86,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2012/03/29</td>
        <td>$433,060</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>33</td>
        <td>2008/11/28</td>
        <td>$162,700</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>New York</td>
        <td>61</td>
        <td>2012/12/02</td>
        <td>$372,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>San Francisco</td>
        <td>59</td>
        <td>2012/08/06</td>
        <td>$137,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>Tokyo</td>
        <td>55</td>
        <td>2010/10/14</td>
        <td>$327,900</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>San Francisco</td>
        <td>39</td>
        <td>2009/09/15</td>
        <td>$205,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>Edinburgh</td>
        <td>23</td>
        <td>2008/12/13</td>
        <td>$103,600</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>London</td>
        <td>30</td>
        <td>2008/12/19</td>
        <td>$90,560</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Quinn Flynn</td>
        <td>Support Lead</td>
        <td>Edinburgh</td>
        <td>22</td>
        <td>2013/03/03</td>
        <td>$342,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Charde Marshall</td>
        <td>Regional Director</td>
        <td>San Francisco</td>
        <td>36</td>
        <td>2008/10/16</td>
        <td>$470,600</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Haley Kennedy</td>
        <td>Senior Marketing Designer</td>
        <td>London</td>
        <td>43</td>
        <td>2012/12/18</td>
        <td>$313,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Tatyana Fitzpatrick</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>19</td>
        <td>2010/03/17</td>
        <td>$385,750</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Michael Silva</td>
        <td>Marketing Designer</td>
        <td>London</td>
        <td>66</td>
        <td>2012/11/27</td>
        <td>$198,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Paul Byrd</td>
        <td>Chief Financial Officer (CFO)</td>
        <td>New York</td>
        <td>64</td>
        <td>2010/06/09</td>
        <td>$725,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Gavin Cortez</td>
        <td>Team Leader</td>
        <td>San Francisco</td>
        <td>22</td>
        <td>2008/10/26</td>
        <td>$235,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Zorita Serrano</td>
        <td>Software Engineer</td>
        <td>San Francisco</td>
        <td>56</td>
        <td>2012/06/01</td>
        <td>$115,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Jennifer Acosta</td>
        <td>Junior Javascript Developer</td>
        <td>Edinburgh</td>
        <td>43</td>
        <td>2013/02/01</td>
        <td>$75,650</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Cara Stevens</td>
        <td>Sales Assistant</td>
        <td>New York</td>
        <td>46</td>
        <td>2011/12/06</td>
        <td>$145,600</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Hermione Butler</td>
        <td>Regional Director</td>
        <td>London</td>
        <td>47</td>
        <td>2011/03/21</td>
        <td>$356,250</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Lael Greer</td>
        <td>Systems Administrator</td>
        <td>London</td>
        <td>21</td>
        <td>2009/02/27</td>
        <td>$103,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Jonas Alexander</td>
        <td>Developer</td>
        <td>San Francisco</td>
        <td>30</td>
        <td>2010/07/14</td>
        <td>$86,500</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Shad Decker</td>
        <td>Regional Director</td>
        <td>Edinburgh</td>
        <td>51</td>
        <td>2008/11/13</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Michael Bruce</td>
        <td>Javascript Developer</td>
        <td>Singapore</td>
        <td>29</td>
        <td>2011/06/27</td>
        <td>$183,000</td>
    </tr>
    <tr>
        <td><input disabled="disabled" class="check-box" type="checkbox" checked="checked"></td>
        <td>Donna Snider</td>
        <td>Customer Support</td>
        <td>New York</td>
        <td>27</td>
        <td>2011/01/25</td>
        <td>$112,000</td>
    </tr>
    </tbody>
</table>

Answer 4

尽管之前的帖子我无法让它发挥作用。在列搜索框中键入True或False时，数据表（v1.10.15）只是没有在复选框中选取隐藏值。因此，对于那些需要替代解决方案的人，以下内容为我解决了这个问题。

更换剃刀代码

@Html.DisplayFor(modelItem => item.Test)

用这个来表示简单的True和False值

@Html.ValueFor(modelItem => item.Test)

然后将columndef更改为：

"columnDefs": [
{
    "targets": 3,
    "render": function (data, type, row, meta) {

        if (type === 'display') {
            if (data === "True") {
                return "<input disabled='disabled' class='check-box' type='checkbox' checked='checked'>";
            }
            else return "<input disabled='disabled' class='check-box' type='checkbox'>";
        }

        return data;
    }
}]

jQuery DataTables搜索列是一个复选框

问题描述投票：0回答：4

4个回答

最新问题

jQuery DataTables搜索列是一个复选框

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4