Getting access to Search field
Getting access to Search field
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
This question has accepted answers - jump to:
Answers
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.
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
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.
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 thecolumn()search(). If you chooseTechnical Authorin step 2 you will see the expected result.Kevin
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
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
Uh oh.
Is there a problem with this solution?
Since the search is a potentially costly server side search, isn't this going to trigger two searches?
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
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.