javascript - jquery datatables populate search data -
on document.ready, datatable loads accordingly.
what need build feature reloads datatable if user conducts search.
so datatable loads this:
$(document).ready(function() { $('#searchsubmit').on('click', function() // used searching { var searchbooking = $('#searchbooking').val(); var searchquote = $('#searchquote').val(); var searchtli = $('#searchtli').val(); if(searchbooking == "" && searchquote == "" && searchtli == "") { $('.message').text('you did not enter search criteria.'); return false; // making sure enter } else { $.post('api/searchall.php', {searchbooking:searchbooking, searchquote:searchquote, searchtli:searchtli}, function(data) { // do here??? // how return results load }); } }); // if user not enter search parameters, load $('#example1').datatable({ "ajax": { "url": "api/displayqnams.php", "type": "post", "datasrc": '' }, "columns": [ { "data": "" }, { "data": "column1" }, { "data": "column2" }, { "data": "column3" } ], "idisplaylength": 25, "order": [[ 6, "desc" ]], // , on }); });
as see in above code, when document ready, if user not conduct search, load of data process called 'displayqnams.php'.
but if user conducts search, parameters sent process called 'qnamssearch.php'.
how reload datatable search results 'qnamssearch.php'?
i tried create variable inside post:
var dataurl = data;
and tried call variable in ajax call:
"ajax": { "url": dataurl, "type": "post", "datasrc": '' }
but datatable not display , there no console errors.
how can make work?
thank in advance.
you can try using this.
after user click search button, below flow:
- clear datatables - datatables clear()
- add new data table - datatables rows.add()
- adjust column size (optional) - datatables adjust.columns()
redraw datatable new data - datatables draw()
$(document).ready(function(){ var datatable = $('#example1').datatable({ "ajax": { "url": "api/displayqnams.php", "type": "post", "datasrc": '' }, "columns": [ { "data": "" }, { "data": "column1" }, { "data": "column2" }, { "data": "column3" } ], "idisplaylength": 25, "order": [[ 6, "desc" ]] }); $('#searchsubmit').on('click', function(){ var searchbooking = $('#searchbooking').val(); var searchquote = $('#searchquote').val(); var searchtli = $('#searchtli').val(); if(searchbooking == "" && searchquote == "" && searchtli == ""){ $('.message').text('you did not enter search criteria.'); return false; // making sure enter } else { $.post( 'api/searchall.php', { searchbooking:searchbooking, searchquote:searchquote, searchtli:searchtli }, function(data) { var newdata = data; datatable.clear().draw(); datatable.rows.add(newdata); // add new data datatable.columns.adjust().draw(); // redraw datatable }); } }); });
Comments
Post a Comment