I use Datatable on a table, I load the data from a JS array (so it is server-sided). In order to load a list of 350 rows - each rows of 10 column - IE8 requires more than 10s where filter and sorting are disabled.
https://datatables.net/faqs/index says that it can handles thousend of rows.
$("#table").DataTable({
"data" : data,
"processing" : true,
"filter": false,
"orderClasses": false,
"ordering": false,
"deferRender" : true,
"columns": columns,
});
(data is my list of rows and columns the columns description).
I understood that the slowness is coming from the initialization of the JS array that I pass to construct the table.
I used a PHP script and iterated over each row / column that I wanted like:
data[$row][$col] = 'xxx';
....
The only way I found to make it work really faster is to really build the js array in one pass like:
var data = [
<?php foreach($rows as $row)?>
{ <?php foreach($cols as $n=>$col?>
'<?php echo $n?>': '<?php echo $col?>',
];
This way for a 1 000 lines tables I pass from 15s to 2s with sorting and filtering activated.
Carreful: when IE8 sees an array like
[{'coucou': 'hi'},]
Then it builds an array:
[{'coucou': 'hi'}, undefined]
That datatable doesn't like
Related
I have a vuetify Data-table with multisort enabled like so:
<v-data-table
ref="insuranceTable"
:headers="headers"
:items="getRows"
:sort-by="['created']"
:sort-desc="[true]"
multi-sort
:search="search"
:items-per-page="10"
>
one of the columns in the table is Insurance Type. this value is fetched by using an index like this {{insuranceType[item.code]}}. The insuranceType array is defined as follows:
insurancetype:[
this.$t('insuranceType.life'),
this.$t('insuranceType.health'),
this.$t('insuranceType.property'),
]
The values are displayed in the data-table without any issue. However, When I try To sort the table by Insurance Type Column, nothing happens. The Sorting works for all other columns. The sorting works for Insurance Type column if I use a non i18n array like this:
insurancetype:['life','health','property']
How can I configure the V-Data-Table so it can be sorted by columns with i18n values?
You can define a custom sorting function for the Insurance Type column in your headers array. I've used this method before to be able to sort some custom string dates formats like this:
headers: [
{
text: 'Created date',
value: 'created_at',
align: 'center',
sort: (a, b) => {
var date1 = a.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')
var date2 = b.replace(/(\d+)\/(\d+)\/(\d+)/, '$3/$2/$1')
return date1 < date2 ? -1 : 1
}
},
...
]
You should be able to add your own logic to be able to sort those. Can you replicate the issue in a codesanbox or codepen?
How to show Grand Total with million rows from a REST?
Documentation has the example when all data is loading once with option loadonce: true but that is a very small number of rows. How can I attain the same with partial data loading?
You can calculate the total of the column field on the server and transport it using userdata again with options userDataOnFooter
$("#grid").jqGrid({
...
footer : true,
userDataOnFooter: true,
...
});
See the docs for these options and the demo here
I have two data tables in my project. First one is taking data from an array in my hand,
data table #1:
$('#table1').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"aaSorting": [[7,'desc'],[2,'desc']],
"bStateSave": true
});
In above table I got the result sorted as expected. But for my second table, which uses an ajax request for data, is not sorted as expected,
data table #2
$('#table2').dataTable({
processing: true,
serverSide: true,
ajax: 'a valid url',
"aaSorting": [[3,'asc'],[0,'desc']],
"bStateSave": false,
"iDisplayLength": 25
});
I got the column with index 3 sorted but column with index 0 is not sorted for the same values of column 3. Do anyone is facing this kind of issue? Any help or suggestions invited.
If you use aDataSort instead of aaSorting , you can tell a column that it should do a multi-column sort rather than just by itself. - as said over here by datatable site admin allan.
For more detail about aDataSort, go at datatable
I have a table with 3 columns and when I sort column 1 or 2 then I would like to sort column 3 by descending.
I'm using fnPreDrawCallback (I tried to use fnDrawCallback too).
Here is my code:
"fnPreDrawCallback": function (oSettings) {
var column = oSettings.aaSorting[0][0];
if (column !== 3) {
oSettings.aaSorting.push([3, "desc"]);
}
}
This code looks fine, but, for example, when I sort column 1, the column 3 isn't sorted and, more awkward, when I try to sort at a 2nd time on column 1, the sort result is always ascending.
How can I achieve this?
The data has already been "sorted" by the time the preDrawCallback is fired, so changing aaSorting in here won't change the outcome of the table.
You can verify by checking oSettings. There is aiDisplay and aiDisplayMaster properties. aiDisplay is an ordered array of the elements that changes as they are sorted from clicks on a th. aiDisplayMaster is the original order that the data came back from the server or was existing on the page.
I would recommend manually calling fnSort from the click event of your th elements. To do this you will have to unbind the click event that datatables installs.
Create a function like this and call it from fnInitComplete so it only runs after datatables has been setup.
function unbindDTSorting() {
//unbind sort event, prevent sorting when header is clicked
$j('[id$=table] th').unbind('click.DT');
//create your own click handler for the header
$j('[id$=table] th').click(function(e) {
var oTable = $j('[id$=table]').dataTable();
//here is where you can do all of your if/else logic to create the desired multidimensional sorting
if(this.cellIndex == 3){
oTable.fnSort( [ [2, 'asc'],[3,'desc' ]] );
}
});
}
I feel sure this is a simple answer but as a rookie I'm failing to see it. I just want a table to have column 0 and 2 disabled from the sort, then the default sort to be column 1. Two separate commands, but while they work individually they seem to clash together.
I can have my columns 0 and 2 disabled and the table works perfectly. Or I can have my initial sort set to column 2 and the table works perfectly. But when put together my remaining sortable columns will only allow one click, they cannot be toggled acending, descending.
Can anyone help, as I just can't figure out what I'm doing wrong? Thank you in advance!
Try this demo:
$('table').tablesorter({
sortList : [[ 1, 0 ]],
headers : {
0 : { sorter: false },
2 : { sorter: false }
}
});