I have implemented jQuery Datatable Grid in Angular 13. But when I delete record and datatable is refreshed. then below error occurs.
DataTables warning: table id=DataTables_Table_1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
Any Solution for this ??
After struggling for many hours, I found solution for this.
just add destroy:true in this.dtOptions = {} like below
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 10,
scrollX: true,
processing: true,
deferRender: true,
destroy:true
};
Error will be fixed. Thanks
Related
I'm trying to use yacdf (0.9.3) for the first time with DataTables (1.10.16). I'm using DataTables built in scrolling for both horizontal and vertical scrolling of my table.
Either way (old or new DataTables API) I try to initialize the filter when scrolling enabled I end up with Uncaught TypeError:
Cannot read property 'oScroll' of null!
var table = $(".jqDataTable").DataTable({
dom: 'frti',
scrollY: "460px",
scrollCollapse: true,
scrollX: true,
paging: false
});
yadcf.init(table, [{column_number : 3}]);
Uncaught TypeError: Cannot read property 'oScroll' of null
at scrollXYHandler (jquery.dataTables.yadcf.js.jsf?ln=js:3696)
at initAndBindTable (jquery.dataTables.yadcf.js.jsf?ln=js:3719)
at Object.init (jquery.dataTables.yadcf.js.jsf?ln=js:3938)
However when scrolling disabled the filter gets initialized.
I feel stuck with the problem.
I have more than 10000 records in my JSON, which I want to show in the Jquery DataTable. Destroying and recreating the table takes more than 10 sec for each function.
Can someone help me optimize the DataTable population, or have any suggestions?
VMSearchDevice.searchGridListIndividual([]); // Observable binded with the datatable
_dtSearchGrid.clear(); //Clears the Table content
_dtSearchGrid.destroy(); //Destroys the table object
VMSearchDevice.searchGridListIndividual(jsonResult); //Populating the observable array
_dtSearchGrid = $('#dtSearchResult').DataTable({ //Intializing the table again
responsive: true,
"sDom": 'Rlfrtip',
"iDisplayLength": 10,
"bScrollCollapse": true,
"bPaginate": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bSortClasses": true,
"sPaginationType": "full_numbers" // To Set Pagination
});
Try using "bDeferRender" feature of DataTables:
Deferred rendering can provide DataTables with a huge speed boost when you are using an Ajax or JS data source for the table. This option, when set to true, will cause DataTables to defer the creation of the table elements for each row until they are needed for a draw - saving a significant amount of time.
"bDeferRender": true
I am loving this yadcf plugin an all its options. But for some reason, I cannot get it to filter my data. I want to type in data and have it filter on the fly. I have looked through all the examples on the yadcf site and followed them to the best of my knowledge. I am using JQuery 2.1.4, DataTables 1.10.10, and yadcf 0.8.9.beta.26.
Here is my relevant javascript:
$(document).ready(function() {
'use strict';
var table = $(".stocks").DataTable({
paging: false,
searching: false,
info: false
});
yadcf.init(table, [
{
column_number : 4,
filter_container_id: 'industrySearch',
filter_default_label: "Type industry",
filter_type: "text",
text_data_delimiter: ","
}]);
Let me know if any other code is needed.
You must remove the searching: false, from your datatables init code.
Setting searching to false disables datatables searching abilities, and since yadcf uses datatables search api under the hood that it wont work.
Read here more about this option
I am creating the dojo Grid as below and I am using the indirectSelection plugin for creating a checkbox, as below, but by default the checkboxes will come at the first column of the grid. How do I make it to come at the last column?
var grid = new dojox.grid.EnhancedGrid({
id: 'serialsGrid',
style: 'width:auto;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {name:'Requested',headerSelector:true, width:"40px", styles:"text-align: center;"},
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
}, document.createElement('div'));
/*append the new grid to the div*/
//var temp=grid.domNode;
dojo.byId("serialsGridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
serialsGridCopy=grid;
grid.startup();
});
The plugin itself has no capabilities of doing so as far as I know so I started looking at the functions the EnhancedGrid itself has and stumbled upon the function moveColumn() in grid.layout.
The documentation itself (here) was not really usefull, but I used it to move every column one position ahead so that the first column would become the last one.
I also made a working JSFiddle to demonstrate which you can see here. The code that is moving the columns can be found at the bottom of the code:
for (var i = 1;i < grid.layout.cells.length;i++) {
grid.layout.moveColumn(1, 1, i, i-1, grid.layout);
}
What it does is the following: it moves every column starting from index 1, so that means all columns except the indirectSelection column one step ahead (i-1).
I cannot make it to work properly.
I need on initial load to have my table sorted by 0-index column in 'desc'.
I've tried:
$(function() {
ordersTable = $('#orders').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": 'full_numbers',
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{% url get_orders %}",
"aoColumnDefs":[
{"aTargets":[0], "asSorting": ["decs", "asc"]}
]
});
and what it does is sends "sSortDir_0 :'asc'" and displaying "asc" active after that.
How can it make it work? (without faking click on the column to resend the ajax)
Thanks
Ok, I guess I've found it: aaSorting and aaSortingFixed sets the initial sorting. (reference here)