Multi-column search is causing re-sizing to not be responsive

Multi-column search is causing re-sizing to not be responsive

cgolbycgolby Posts: 2Questions: 1Answers: 0

When using the multi-search columns, re-sizing is not responsive...checked it with the debugger and found no errors.
The last column in the table is a button. If i remove the <th></th> tag from <tfoot> for the button column, then resizing works but searching is on-op.
What could be going on here?
Also, can a specific column be excluded from the multi-column search as there is no need to search a column up download buttons?

the javascript is...

<script type="text/javascript">

    $(document).ready(function () {

        // Setup - add a text input to each cell for search
        $('#ListOfStudents tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        // DataTable
        var table = $('#ListOfStudents').DataTable({
            "iDisplayLength": 10
            , "searching": true
            , responsive : true
        });

        // Apply the search
        table.columns().every(function () {
            var that = this;

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

        var n = document.createElement('script');
        n.setAttribute('language', 'JavaScript');
        n.setAttribute('src', 'https://debug.datatables.net/debug.js');
        document.body.appendChild(n);
    });
</script>

Using the following css to put the search boxes on top of the column headers...

tfoot {
    display: table-header-group;
}

tfoot input {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

classes used for the table...

<table id="ListOfStudents" class="table table-bordered table-condensed table-hover table-responsive">

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    hi @cgolby ,

    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

  • cgolbycgolby Posts: 2Questions: 1Answers: 0

    ok, thank you!

This discussion has been closed.