vendredi 11 août 2017

jQuery DataTables search column that is a checkbox

I am using jQuery DataTables Individual Column Searching, on one of my tables and one of my columns contains checkboxes.

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();
            }
        });
});

This displays the column I am speaking of like so:

enter image description here

But if I start typing "True" into the textbox.. my table refreshes to say "No matching records found". Fair enough, because the checkbox doesn't have a value of "true" in terms of HTML rendering.. instead it just says `checked="checked".

But as an argument, when I do console.log(this.data()), I see every row in the table and those values are coming back as "True", "False", "False".

enter image description here

Is there a way to search for checkboxes that are either checked or unchecked via jQuery datatables?




Aucun commentaire:

Enregistrer un commentaire