Individual column searching

mmcnair80

Is it possible to combine the Select Inputs and the Text Inputs? I use DataTables on several tables, always the same initialization. I would like to chose the column for the Select Inputs by the column header since the column that I want the select list on is not always in the same position. Then all the others I want to have the Text Inputs. This way I'll have one column that has the Select Inputs and all others that have the Text Inputs.

I have been able to implement the different Select and Text Inputs from these two examples. But I'm not good enough with jquery and javascript to figure out how to select the right column for the Select input and have all the others be Text inputs. The tables that I use can be anywhere from 3 columns to 75+ columns. And I want to select the column by the header name for the Select input.

And on top of all of this, is there a way to make the Select Input a MultiSelect Input? I am having it a selector for the state and would like to be able to select multiple states at once.

mmcnair80

This is what I am doing:

initComplete: function ()
{
    var api = this.api();

    // Apply the search
    api.columns('.dt-filter-text').every(function ()
    {
        var that = this;

        $('input', this.footer()).on('keyup change', function ()
        {
            if (that.search() !== this.value)
            {
                that
                  .search(this.value)
                  .draw();
            }
        });
    });
    api.columns('.dt-filter-select').every(function ()
    {
        var column = this;
        var select = $('<select multiple = "multiple"><option value=""></option></select>')
            .appendTo($(column.footer()).empty())
            .on('change', function ()
            {
                var val = $.fn.dataTable.util.excapeRegex(
                    $(this).val()
                );
                var strVal = States.replace("<div class='Scrollable'>", "");
                strVal = strVal.replace("</div>", '');
                column
                    .search(strVal ? /*'^' +*/strVal /*+ '$'*/ : '', true, false)
                    .draw();
            });
        column.data().unique().sort().each(function (d, J)
        {
            var strValue = d.replace("<div class='Scrollable'>", '');
            strValue = strValue.replace("</div>", '');
            select.append('<option value="' + strValue + '">' + strValue + '</option>')
        });
    });
}

Then I just add the correct class to the columns that I want to have either the select list of the text box.