Getting access to Search field

chuckg

I have a popup menu added to the search mechanism.

    function formatm(table) {
        // search popup
        return '<select name="prsl" id="prsl">' +
            '<option value="starting with" ' +
            ((shwhr === 'starting with' || state === '') ? ' selected' : '') + '>starting with</option>' +
            '<option value="sounds like" ' +
            (shwhr === 'sounds like' ? ' selected' : '') + '>sounds like</option>' +
            '</select>';
    }

The table

    $(document).ready(function () {
        // Setup - add a text input to each footer cell
        var table = $('#pr').DataTable({
           "processing": true,
            "serverSide": true,
           // popup field added to DOM here:
            "dom": "<'tbh'l<'metaphone'>f>rtip",
            'deferLoading': 0,
            "stateSave": true,
            "stateDuration": -1,
            "stateLoadParams": function (settings, data) {
                data.search.search = "";
            },
            "ajax": {
                "url": "/shpr.php",
                // "data": function (d) {
                //     d.where = shwhr;
                // }
            },
            "pagingType": "input",
            "columns": [
                {
                    "className": 'dt-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                },
                {"name": 'name'},
            search: {"return": true},
            lengthMenu: [25, 50, 100]
            }
        });

       // add popup select menu
        $("div.metaphone").html(formatm(table));

       // add popup response handler
        $(document).ready(function () {
            $("#prsl").change(function () {
                var table = $('#pr').DataTable();


/*
This is a server side data request so the search field is set to trigger a search only an a return key.
If a user alters the search field and then without hitting return they click on the popup menu that triggers this draw
*/

                table.columns(COLUMN1).search($(this).find(":selected").text()).draw();

/*
  The trouble with that is that the draw uses the state value of search field rather the browser value of search field.
  After redrawing the table the search field is restored from state and the user's input is replaced.

  Somehow I have to get the keystroke on the search field to change the state or I have to set the state value in the popup 
  response handler from the search field. However the search field doesn't have a name or id that let's me get ahold of it.

 What to do?
*/
    })
  })
)}

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I don't understand all of what you are saying. Your select search in the formatm function is a custom element not created by Datatables.

The trouble with that is that the draw uses the state value of search field rather the browser value of search field.

Sounds like you are saying that the search uses the selected option not any additional text entered by the user. correct? Maybe .find(":selected") should be replaced by .val() to get the value of the input.

I'm not sure what popup you are referring to. Please post a link to your page or a test case replicating the issue so we can debug the running code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

chuckg

Explaining a datatables problem is not simple.
http://live.datatables.net/rikayepi/1/edit
set search to "b", press enter
set search to "a", set Any Position popup to "System Architect"
voila, the Search field is set to "b" which it is getting from State
possible solutions?:
get keypress on Search field to update State?
get popup menu to update State with current Search value?

to repeat you may have to clear local storage otherwise the search results go to empty for some reason.

I hope I set the live.datatables.net properly.
First time I've used it.

kthorngren

I hope I set the live.datatables.net properly.

It demonstrates the issue so you set it up perfectly. Plus the replication steps are helpful

I think this is what you are asking for:
http://live.datatables.net/rikayepi/2/edit

Basically it gets the global search input value the performs a search() to update the table. Then the column()search(). If you choose Technical Author in step 2 you will see the expected result.

Kevin

chuckg

Ah, that was easy. I didn't look to the enclosing div for an id.
Not sure why the Search field itself doesn't have an id or name.

thanx

allan

Not sure why the Search field itself doesn't have an id or name.

It doesn't need them for how we use them. They could be added with an extra line or two in the initialisation of your table, but I think just the selector for it is fine.

Allan

chuckg

Uh oh.

Is there a problem with this solution?

     var table = $('#pr').DataTable();
     // Get the search input value
     var searchVal = $('#pr_filter').find('input').val();
     table.search(searchVal);
     table.columns(COLUMN1).search($(this).find(":selected").text()).draw();

Since the search is a potentially costly server side search, isn't this going to trigger two searches?

kthorngren

You can use your browser's network inspector to verify this but the draw() in line 5 executes the search. So, one server request will be sent with both searches.

Kevin

chuckg

If only I had read the documentation further:
table.search
Please be aware that this method sets the search to apply to the table only - it does not actually perform the search.