How can I pass a variable to a date search field via a URL?
I am currently working on a project laravel 5.4
where I have successfully used datatable with DataTables jQuery Plugin
. This datatable ( #sample_1
) includes a default search box which works great and filters records based on search.
An available datatable is available in /home/loan
. I want to know if there is a way to load the above page with a filtered list of records by passing the search string to the datatable search box. ex:/home/loan?search=bella
While checking my datatable html code in chrome, I found that datatable search has
<label>Search:
<input type="search" class="form-control input-sm input-small input-inline" placeholder="" aria-controls="sample_1">
</label>
I believe this is included in the datatable plugin. I couldn't find a way to give it a name / id so that I can try to do it /home/loan?search=bella
I think this would be the easiest way if it worked. But here is the javascript
var initTable1 = function () {
var table = $('#sample_1');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _END_ out of _TOTAL_ loans",
"infoEmpty": "No loans found",
"infoFiltered": "(filtered1 from _MAX_ total loans)",
"lengthMenu": "Show _MENU_",
"search": "Search:",
"zeroRecords": "No matching loans found",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"lengthMenu": [
[11, 20, 30, -1],
[11, 20, 30, "All"] // change per page values here
],
// set the initial value
"pageLength": 11,
"pagingType": "bootstrap_full_number",
"columnDefs": [
{ // set default column settings
'orderable': true,
'targets': [0]
},
{
"searchable": false,
"targets": [0]
},
{
"className": "dt-right",
//"targets": [2]
}
],
"order": [
[1, "asc"]
] // set first column as a default sort by asc
});
Please help me with this
source to share
You need to use initComplete
to redraw the table after getting url parameters.
function getParam()
{
return window.location.href.slice(window.location.href.indexOf('?') + 1).split('=')[1];
}
var table = $('#sample_1');
// begin first table
table.dataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
"language": {
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
},
"emptyTable": "No data available in table",
"info": "Showing _END_ out of _TOTAL_ loans",
"infoEmpty": "No loans found",
"infoFiltered": "(filtered1 from _MAX_ total loans)",
"lengthMenu": "Show _MENU_",
"search": "Search:",
"zeroRecords": "No matching loans found",
"paginate": {
"previous":"Prev",
"next": "Next",
"last": "Last",
"first": "First"
}
},
"bStateSave": true, // save datatable state(pagination, sort, etc) in cookie.
"lengthMenu": [
[11, 20, 30, -1],
[11, 20, 30, "All"] // change per page values here
],
// set the initial value
"pageLength": 11,
"pagingType": "bootstrap_full_number",
"columnDefs": [
{ // set default column settings
'orderable': true,
'targets': [0]
},
{
"searchable": false,
"targets": [0]
},
{
"className": "dt-right",
//"targets": [2]
}
],
"order": [
[1, "asc"]
], // set first column as a default sort by asc
"initComplete": function () {
this.api().search(getParam()).draw();
});
});
source to share