Develop Reference

I am using data Tables in asp.net core it's working fine but some of thing not coming properly. for example my pagination is just a link

In This Image My image Pagination design is shown
I want design like that
My Java script code
$(document).ready(function () {
$('#AllUsers').DataTable({
processing: true, // for show progress bar
serverSide: false, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: false, // for disable multiple column at once
"pagingType": "full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
deferRender: true,
paging: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
}],
});
});

Post Data in php using datatables javascript serverside

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']

jQuery Datatable preInit event not firing

I would like to access the dropdown list for length display of the jQuery Datatable before the data is loaded in the table, i have a problem that whenever the user select the lenght of records to display in the table , the table resize and trigger window.resize() and i want to access the dropdown list after the table initialization but before the data is loaded, here is what i trying to do but it doesn't work.
let table = $('#data-table').DataTable();
$(document).on('preInit.dt', function (e, settings)
{
$('select[name=data-table_length]').click(function ()
{
console.log('dropdown selected');
window_resize = false;
});
});
table = $('#data-table').DataTable({
destroy: true,
serverSide: false,
autoWidth: false,
paging: true,
order: [[1, 'asc']],
searching: true,
stateSave: true,
scrollX: true,
lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
ajax: {
url: '/Observer/GetActiveClientsByProfileId',
type: 'POST',
data: {
ProfileId: profileId
},
dataSrc: ''
},
columns: [
{
title: 'Zone',
data: 'LastKnownZone',
},
{
]
});

Show "All" pages in DataTables along with responsive tables and other attributes

I dont know how to to merge the function of my current attibutes of responsive and fixed header etc with Show "All" list function like it has in this one https://datatables.net/examples/advanced_init/length_menu.html
I dont know how to do it pls help here is my current function
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var table = $('#example').DataTable({
responsive: true,
paging: false,
columnDefs: [{
searchable: false,
orderable: false,
targets: 0,
}],
order: [
[1, 'asc']
],
});
new $.fn.dataTable.FixedHeader(table);
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
});
</script>
i am unable to merge the function with show "All" page length menu in javascript please help.
also please allow me run snippet im very new to js
thank you

var table = $('#example').DataTable({
responsive: true,
paging: false,
// Add this line
lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
columnDefs: [{
searchable: false,
orderable: false,
targets: 0,
}],
order: [
[1, 'asc']
],
});
new $.fn.dataTable.FixedHeader(table);

Change DataTable Search Label

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.. ",
},
});