Refresh the oLanguage sSearch text field after an event?

vinhtvu2

I have a select drop down in one of the header that will filter the result to only the text content of the selected text.

After a selection is made, the search will only filter from within that list. Which is great. I just want to let the users know that the search box is now limited to that selection.

In order to do that, I would like to change the "Search: " text in the label to something like "Search (firefox): ", firefox being the selection from the drop down menu. Is there a way to re-draw the whole table but maintain the search?

If I can get the "firefox" in red as a link, so when it's clicked, another event triggers and clear it out and we're back to normal, that'd be the end goal.

I've been trying to get it to work with fnSettings(), but I'm not quite sure how to reinitialize it.

var department_search = "Search: ";
$(document).ready(function() {
    
    // DataTable
        var table = $('#Employee_Directory').DataTable( {
        "processing": true,
        "bPaginate": true,
        "serverSide": true,
        "lengthMenu": [ [15, 30, 45, -1], [15, 30, 45, "All"] ],
        "oLanguage": {
                            "sSearch": department_search
                      },
        searchHighlight: true,
        "ajax": {
            "url": "../directory/get_employee.php",
            "type": "POST"},
        "columns": 
        [
            {
            "className":'Last-Name',
            "data": "LastName"  },
            { "data": "FirstName" },
            {
                "data": "Department",
                "orderable":      true
            },
            { 
                "data": "Title",
                "orderable":      true
            }
        ],
        "order": [[0, 'asc']]
        } );
        // Setup - add a text input to each header cell
     $('#Employee_Directory thead th').each( function (i) {
            if (i == 2)
            {
                var title = $('#Employee_Directory thead th').eq( $(this).index() ).text();
                $(this).html('<?php
                    echo $selection;
                ?>');
                
            }
    } );
     // Apply the search
    table.columns().eq( 0 ).each( function ( colIdx ) {
        if( colIdx == 2)
        {
            $( 'select', table.column( 2 ).header() ).on( 'change', function () {
                department_search= "Search: "+ this.value;
                table.column( 2 ).search( this.options[this.selectedIndex].innerHTML );
                alert("debug1: "+department_search);
                var oSettings = table.fnSettings();
                oSettings.sSearch = department_search;
                alert("debug2: "+department_search);
                table.fnDraw();
            } );
        }
    } );
});

vinhtvu2

I notice in this code section here:

$( 'select', table.column( 2 ).header() ).on( 'change', function () {
                department_search= "Search: "+ this.value;
                table.column( 2 ).search( this.options[this.selectedIndex].innerHTML );
                alert("debug1: "+department_search);
                //table.order([[1, 'asc']]).draw();
                table.oLanguage({"sSearch": department_search}).draw();
                //table.draw();
            } );

If I enable the first one for ordering on the second column by ascending order, it would work. Then if I do it without any ordering and just do the table.draw(), it would work as well. But the search criteria doesn't seem to refresh.

allan

I'm afraid there is no public API to modify the language strings after initialisation - sorry! It is something I would like to add in future, but I'm concerned about the amount of code it would take to fully implement.

Allan

vinhtvu2

Ahhh crap. I keep trying to add features that aren't available! That's good for development though.

I'll see if I can insert a textbox into the same div and forwarding the search feature to a Javascript function and changing the variable that way and hiding the default searchbox.

Thanks!