Been trying to change the Search: to Filter: in my datatable that I created.
I tried this that i found:
$(document).ready(function() {
oTable = $('#datatable-example_filter').dataTable({
"aaSorting": [[ 10, "desc" ]],
"bJQueryUI": true,
"aLengthMenu": [[25, 50, 100, 250, 500, -1], [25, 50, 100, 250, 500, "All"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sSearch": "Filter: "
}
});
} );
but it is not working, #datatable-example_filter is the name of the id, inside the div that is generated by dataTable
The other answer that uses "oLanguage" is using legacy DataTables api. According to DataTables v 1.10+ documentation, the syntax is:
$('#example').dataTable( {
"language": {
"search": "Filter records:"
}
} );
very easy, just put this parameter when you call data table function:
"oLanguage": {
"sSearch": "<span>YOUR SEARCH TITLE HERE:</span> _INPUT_" //search
}
Inside the Datatable Javascript (table = $dataTable.DataTable) add the following code:
language: {
'search' : '' /*Empty to remove the label*/
}
I left the search empty because I wanted the info to be in the Placeholder
Ps: If you want to add a placeholder put the following code outside the Datatable initialization
$('.dataTables_filter input').attr("placeholder", "Zoeken...");
I have found this code will change the Search Label ( in my case to "Filter results:" before the DataTable get populated with data.
var dataTable_leSrch = $('#dataTable_leSrch').dataTable({
"oLanguage": {
"sSearch": "Filter results:"
}
});
but when I later populate the DataTable with data the label reverted back to "Search:", so I had to add this code to my DataTable configuration to keep the label changed:
function fillDataTable(res) {
if ($('#dataTable_leSrch').length !== 0) {
$('#dataTable_leSrch').DataTable({
fixedHeader: {
header: true,
headerOffset: $('#header').height()
},
oLanguage: {
"sSearch": "Filter results:"
},
responsive: false,
scrollX: true,
scrollY: 400,
scrollCollapse: true,
select: true,
destroy: true,
aaData: res.data.Results,
...
// Input text box will be appended at the end automatically
$(document).ready( function() {
$('#example').dataTable( {
"oLanguage": {
"sSearch": "Filter records:"
}
} );
} );
// Specify where the filter should appear
$(document).ready( function() {
$('#example').dataTable( {
"oLanguage": {
"sSearch": "Apply filter _INPUT_ to table"
}
} );
} );
for more detail check this link http://legacy.datatables.net/usage/i18n
try this for change label search panel
$('#table_id').DataTable({
"oLanguage": {
"sSearch": "type somthing.. ",
},
});
Related
I am using jQuery DataTables and it's working well. I just want to show a text message while the table is being initialized.
I am not using server side.
How can I do it?
$(document).ready(function() {
$(".table").DataTable({
"bFilter": true,
"lengthMenu": [ 10, 25, 50, 75, 100, 150, 200, 500, 1000 ],
"columnDefs": [{ targets: 'no-sort', orderable: false }],
"pageLength": 50,
"language": {
"processing": "Loading..."
},
"initComplete": () => {
$(".table").show();
}
});
});
I tried with preinit but no luck, and I also do not want to keep displaying the html if there is no request for datatables, something like beforesend.
i am trying to create a filter function from my datatables, how can i post the value that i want coming from the javascript to php using the datatables function?
here is my sample code from my datatables
var oTable = $('#datatables').DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": base_url + "link",
"fnServerParams": function (data) {
data.filter_start_date = $('#filter_start_date').val();
console.log(data);
},
dom: 'lBfrtip',
buttons: [
'excel'
],
"lengthMenu": [[10, 20, 50, 100, 300, -1], [10, 20, 50, 100, 300, "All"]],
"pagingType": "full_numbers",
"language": {
"paginate": {
"previous": 'Prev',
"next": 'Next',
}
},
"bAutoWidth": false,
"aaSorting": [[ 0, "desc" ]],
});
and the data.filter_start_date value is i want it to be post from my php. thank you in advance, i am just really stuck with this problem or am i just doing it wrong.
On php you will get a param filter_start_date which will be sent on every datatables ajax request. Just use it to filter your results.
And in javascript you can do something like this to reload the table
$('#filter_start_date').change(function() {
oTable.ajax.reload();
});
EDIT:
Here's exactly how I use it:
$('#table').DataTable({
//configs
ajax: {
url: baseUrl('/ajax/load-docs'),
type: 'post',
data: function(d) {
d.initial_date = $('#initial_date').val();
}
}
});
and in php
$date = $this->getParam('initial_date'); //getParam from Zend_Framework Controller
in your case you can use $_POST['filter_start_date']
I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.
my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})
you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();
following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);
I am trying to combine 2 JavaScript code blocks in in my footer but when I use both it gives an error. How do I combine 2 JavaScript code blocks?
FIRST
$(document).ready(function() {
$('#mydata').DataTable( {
"order": [[ 0, "desc" ]],
scrollY: 400,
scrollCollapse: true,
paging: true
} );
} );
SECOND
$(document).ready(function() {
$('#mydata').DataTable( {
"oLanguage": {
"sUrl": "js/dil/English.json",
}
} );
} );
Error message: DataTables warning: table id=mydata - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
They are just JavaScript initialisation objects. Just combine the objects:
$(document).ready(function() {
$('#mydata').DataTable({
"order": [
[0, "desc"]
],
scrollY: 400,
scrollCollapse: true,
paging: true,
"oLanguage": {
"sUrl": "js/dil/English.json",
}
});
});
This should be working. You need to clearly tell what's the error coming up.
I'm using datatables js 1.9.4 and use their ajax data population capabilities. When I create them in this way pagination shows controls and search bar is there as well, but neither work. Alos the data table is showing all data in one page.
Here is the generation JS:
$("#prop_table").dataTable({
"aaSorting": [[2, "desc" ]],
"sDom": "<'row'<'col-lg-9'l><'col-lg-3'f>r>t<'row'<'col-lg-5'i><'col-lg-7'p>>",
"sPaginationType": "bootstrap",
"bJQueryUI": false,
"bAutoWidth": false,
"aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "All"]],
"iDisplayLength": 5,
"oLanguage": {
"sSearch": "<span></span> _INPUT_",
"sLengthMenu": "<span>_MENU_</span>",
"oPaginate": { "sFirst": "First", "sLast": "Last" }
},
"bProcessing": true,
"iDisplayLength":5 ,
"bServerSide": true,
"sAjaxSource": "/php/api_prop_down.php",
"aoColumns": [{
"mData":"name"
},{
"mData": "time_down"
},{
"mData": "status_id"
},{
"mData": "button",
"mRender": function(data){
if (data != "null" )
return "<button id=\"prop_issue"+data+"\" issue=\""+data+"\" class=\"btn\" data-toggle=\"modal\" data-target=\"#myModal\" onclick=\"getTicket("+data+")\">"+data+"</button>";
else
return "no ticket";
}
}
]
});
$('.dataTables_length select').uniform();
$('.dataTables_paginate > ul').addClass('pagination');
$('.dataTables_filter>label>input').addClass('form-control');
// Set the classes that TableTools uses to something suitable for Bootstrap
$.extend( true, $.fn.DataTable.TableTools.classes, {
"container": "btn-group",
"buttons": {
"normal": "btn",
"disabled": "btn disabled"
},
"collection": {
"container": "DTTT_dropdown dropdown-menu",
"buttons": {
"normal": "",
"disabled": "disabled"
}
}
} );
// Have the collection use a bootstrap compatible dropdown
$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
"collection": {
"container": "ul",
"button": "li",
"liner": "a"
}
} );
MY server side script returns a JSON, which is an encoded php array:
$output = array("sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $count,
"iTotalDisplayRecords" => 5,
"aaData" => $aaData );
....
echo json_encode(propsDownJSON());
Anyone has any insight as to why could this be happening?