The default change to DataTable - javascript

i'm using in library dataTables In the folder jquery.dataTables.min
And there is the option to display 10 rows or 25 or 50 or 100
10 rows are the default
How do I change the default to 50 rows?
Below is just the code that shows the options:
aLengthMenu: [10, 25, 50, 100],
iDisplayLength: 10,

Change its iDisplayLength to 50

Related

DataTable shows 1 insted of empty record message

This is my code for the date table
var table = $('.MyNumbersTable').DataTable({
"lengthMenu": [
[10, 25, 50, 100, -1],
[10, 25, 50, 100, "All"]
],
"aaSorting": [],
"language": {
"zeroRecords": "You don't have any numbers."
}
});
The issue is when there are records in my numbers table it displays records, It is fine.
But when if there is no record in table it show '1' as record instead of display message.
Please see notes regarding language.zeroRecords:
https://datatables.net/reference/option/language.zeroRecords
Note that language.emptyTable is shown when there is simply no
information in the table at all (regardless of filtering), while this
parameter is used for when the table is empty due to filtering.
It seems you may wish to use language.emptyTable : https://datatables.net/reference/option/language.emptyTable

Datatable info footer is displayed twice

i'm using DataTable and now after some work my table has a double datatable info showing as :
Showing 1 to 10 of 385 entries
Showing 1 to 10 of 385 entries
And i don't know how it is happening, in the inspect mode i have :
<div class="dataTables_info" id="tableResult_info" role="status" aria-live="polite">Showing 1 to 10 of 385 entries</div>
<div class="dataTables_info">Showing 1 to 10 of 385 entries</div>
My table is initialized like this :
let matable = $('#tableResult').DataTable({
data: newData,
dom: 'Blfrtipi',
select: true,
responsive:true,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Tous"]],
'columnDefs': [
{
'targets':[column],
'createdCell': function (td) {
$(td).attr('class', 'text-center');
}
}
],
buttons: [
'excel',
{
className: 'boutonCacherLogsMessages',
text: 'Cacher logs et messages',
action: function ( e, dt, node, config ) {
cacherMessages();
cacherLogs();
}
}
],
language: {
"lengthMenu": "Afficher _MENU_ résultats",
search: "_INPUT_",
searchPlaceholder: "Rechercher"
},
});
Can i have your help please ?
Ty
EDIT : Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much
Ok lol i found it fast it was because of the
dom: 'Blfrtipi',
where the last i was in too much

datatables + lengthMenu + All + serverside processing + not working

This is a basic datatables fiddle.
This is the default and the dropdowns will show the follwoing Show options 10, 25, 50, 75 and 100 records:
Now what I would like to get working is the "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ] which I can in this fiddle. But what if I use server side processing, this is where the All option does not work for me. The others do. When I select All it dispalys the data that it was showing and the at the bottom says No data found in the server
As far as i Know the only difference is the data comes from the server. Can anyone advise how i can trouble shoot this? As far as I can tell when I select All I am sending length:-1 and for 10 it is length:10 so not sure why All is not working
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"lengthMenu" : [[ 10, 25, 50, -1 ],[ '10', '25', '50', 'All' ]],
//"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
}
} );
} );
When using server-side processing, you should ignore the start and length request parameters ONLY IF the length parameters is -1 in your PHP script in order to return all records.
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
1)Means that "ALL" is assigned the value of -1.
2)that's the reason why when u select All your are sending length:-1 and for 10 it is length:10
3)that's the reason why you also get No data found in the server - error
4)to proper this give this in your Controller
var length = Request.Form.GetValues("length").FirstOrDefault() == "-1" ? Convert.ToString(YOUR_LIST.Count()) : Request.Form.GetValues("length").FirstOrDefault();
5)this will tell if length == -1 then take your list total count so that it displays all rows .
For me, changing the 1st 3 of these parameters worked :
dom: 'ZBlrtip',
lengthMenu: [[100, 200, -1], [100, 200, "All"]],
bLengthChange: true,
order: [8, "desc"],
paging: true,
pageLength: 100,
serverSide: true

Set the page size in Jtable && razor application

I have included a new frame in my HTML-page, in this frame I have a Jtable .
I need to set the default pagesize to 4 to have the included view without scoller.
I made this changes:
options: {
paging: false,
pageList: 'normal', //possible values: 'minimal', 'normal'
pageSize: 4,
pageSizes: [4, 25, 50, 100, 250, 500],
pageSizeChangeArea: true,
gotoPageArea: 'combobox', //possible values: 'textbox', 'combobox', 'none'
messages: {
pagingInfo: 'Showing {0}-{1} of {2}',
pageSizeChangeLabel: 'Row count',
gotoPageLabel: 'Go to page'
}
},
In jquery.jtable.js and jquery.jtable.min.js. But I get always the page size = 10.
So , I need to know
Why the modification that I made wasn't sufficient?
How can I fix page size to 4 ?
I know this question was asked a while ago but I came across this problem myself recently and figured out what was going on..
Basically, jtable stores your preference for row count in a cookie. So if you previously viewed the page with pageSize 10, that's stored and when you change the JavaScript to a different it still picks up the value of 10 and it looks like nothing has changed.
Clear your cookies and it should work for you with the new pageSize.

How to change results per page value in datatables

Datatables has an option to select the number of records shown per page. The default value starts from 10, 25, 50 and 100. How can I change it to start from 5 instead of 10?
10 records is a bit too much and takes a lot of space in my current design.
Thanx!
http://datatables.net/
The fully correct answer would be to use both and display length to 5:
$(document).ready( function(){
$('#table').dataTable({
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
});
});
If you use JUST "iDisplayLength", then the dropdown will not have that length in options later or when the page loads (instead you will see the first option, IE 10 by default). If you JUST use "aLengthMenu", then your results will still default to 10 instead of the first menu option.
You will want to use the iDisplayLength parameter when you initialize the DataTable object. Here's the example they list in their documentation:
$(document).ready( function() {
$('#example').dataTable( {
"iDisplayLength": 50
} );
} )
More information can be found here: http://www.datatables.net/usage/options
$.extend(true, $.fn.dataTable.defaults, {
"lengthMenu": [[5, 10, 15, 20, 25], [5, 10, 15, 20, 25]],
"pageLength": 5
});
The answer solved my problem of needing the following scenario
$(document).ready( function(){
$('#table').dataTable({
"aLengthMenu": [[10, 25, 50, 100], ["10 Per Page", "25 Per Page", "50 Per Page", "100 Per Page"]]
});
});
I realize that this question is old, but the accepted answer does not answer the OP's question.
The answer is to override the aLengthMenu option when initializing the dataTable. See here: http://datatables.net/examples/advanced_init/length_menu.html
You can simply add:
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
] // remember to add "," if you initialize more option manually
or if you only want to add this option
$('#tablename').dataTable( {
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
} );
which will give you a drop-down to select the number of records per page in pagination.
It hardly for the the data tables 1.9
"iDisplayLength": 50

Categories