Individual search columns and column reoder

tombutlerjr

When I have have column reordering and individual search, the search is wrong once reordered. What I mean is if I have 2 columns, int and string, searching in column 1 with a number works. But if I reorder the columns, to search doesn't match the column, searching for 1 in column 1 will still find matches in column 2, etc.

Individually, both work find. And no errors are thrown. I'm assuming the search needs to be reapplied to the search boxes somehow?

****** Code ****

<script>

        $('#tblMyTable tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        })

        var table = $(document).ready(function () {
            $("#tblMyTable").dataTable({
                "order": [[0, "asc"]],
                dom: 'lrtp',
                colReorder: true,
                initComplete: function () {
                    // Apply the search
                    this.api().columns().every(function () {
                        var that = this;

                        $('input', this.footer()).on('keyup change clear', function () {
                            if (that.search() !== this.value) {
                                that
                                    .search(this.value)
                                    .draw();
                            }
                        });
                    });
                }
            });
        });

        table.on('column-reorder', function (e, settings, details) {

            var headerCell = $(table.column(details.to).header());

            headerCell.addClass('reordered');

            setTimeout(function () {
                headerCell.removeClass('reordered');
            }, 2000);
        });

    </script>

**** table

<table id="tblMyTable" class="display" cellspacing="0" style="width: 100%">
        <thead>
            <tr>
                <th>@Html.DisplayNameFor(model => model.FirstOrDefault().Id)</th>
                <th>@Html.DisplayNameFor(model => model.FirstOrDefault().FirstName)</th>
                <th>@Html.DisplayNameFor(model => model.FirstOrDefault().LastName)</th>
                <th>@Html.DisplayNameFor(model => model.FirstOrDefault().BirthDate)</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(modelItem => item.Id)</td>
                    <td>@Html.DisplayFor(modelItem => item.FirstName)</td>
                    <td>@Html.DisplayFor(modelItem => item.LastName)</td>
                    <td>@Html.EditorFor(modelItem => item.BirthDate)</td>
                </tr>
            }
        </tbody>
        <tfoot>
                <tr>
                    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().Id)</th>
                    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().FirstName)</th>
                    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().LastName)</th>
                    <th>@Html.DisplayNameFor(model => model.FirstOrDefault().BirthDate)</th>
                </tr>
            </tfoot>
    </table>

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin