We Keep Coding

datatables Cannot reinitialise DataTable and destroy is not working

I have tried all the commands for destroy and empty of the datatable after selecting a new option, and is not working.
this is some part of my js file that contains the ajax. it uses dynamic urls apis.
function table(url, columns) {
var dt = $("#datatables").dataTable({
"serverSide": true,
"processing": true,
"ajax": {
"url": url,
"type": "GET",
},
"columns": columns,
lengthMenu: [[25, 100, 250, 500], [25, 100, 250, 500]],
pageLength: 25,
// destroy: true
});
... // more stuff here about the design of the table
}
$("form#btnGetDomain").on("submit", function (ev) {
ev.preventDefault();
ev.stopPropagation();
// $("#datatables").dataTable().fnDestroy();
var url;
var columns;
var categ = document.getElementById("categ").value;
// this is where i do if statements depending what options was selected
// i get the proper url api
...
table(url, columns);
});
i have tried all those commands:
$("#datatables").dataTable().fnDestroy();
$("#datatables").empty();
destroy: true,
The command "destroy: true" inside the dataTable i don't know if it works properly because after i try to select the second time another option, the table doesn't responde, it just says ** Processing....**
I also tried to put the comand inside the on submit function before i select any option to clear the table. Now i m thinking of doing an if statement, if their is a table, clear it.
Thank you
UPDATE
i ve tried with dataTable and DataTable
**UPDATE 2 **
if ($.fn.DataTable.isDataTable("#datatables")) {
$("#datatables").DataTable().clear().draw();
$("#datatables").dataTable().fnDestroy();
}
This command i have put before the var dt = $("#datatables").dataTable({...
Yes i noticed i used small and big cap datatable...but this worked ...i did try to put both with big D but didn't work... also tryed to use in the last one: DataTable().destroy();...didn't work
Example: using videos and channels
I have selected the first time videos.
After i select channels:
It changes the columns names no problem ( i have different columns names for every api)... but the rows remain the same.
When i select back to videos.
Column names change, and rows are changing to previous selection which was channels.
Hope you can understand. It doesn't really make sense why i have to use dataTable and DataTable...
it does change, but wrong changes...at least i am getting closer to the answer, hopefully.

I found out the answer i put this lines of code at the beginning of the table function
function table(url, columns) {
var dt;
if ($.fn.DataTable.isDataTable("#datatables")) {
$("#datatables").DataTable().clear().draw();
$("#datatables").DataTable().destroy();
$("#datatables thead").html('');
}
...
}
It works for me fine, it clears the rows, destroys the table, and empty the thead.
Oh..and i have change from lower case dataTable too upper case DataTable

Update: Did you try clear command? https://datatables.net/reference/api/clear()
$('#datatables').DataTable().clear().draw();
Another thing you could try is using the variable to destroy the table:
var dt = $('#datatables').DataTable({...init stuff...});
dt.destroy();
This could be a dt version issue. Did you try:
$('#datatables').DataTable().destroy();
Please notice the difference dataTable vs DataTable.

Extjs 4 grouped columns header dynamic text modification

I have the following grouped headers grid :
var lestore = Ext.create('Ext.data.Store', {
proxy: {
type: 'memory'
},
autoDestroy: true,
data:objstore
});
thegrid = Ext.create('Ext.grid.Panel', {
store: lestore,
columnLines: true,
columns: [{text:'date'},{text:'TV',columns:{text:'400',columns:[{text:'tt1'},{text:'tt2'}]}] ,
title:'my title' ,
selModel: {
selType: 'cellmodel'
},
renderTo: 'gridmpoff',
plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1}
)
],
listeners: {'edit': function(editor,e) {updtitle(editor,e);}
},
viewConfig: {
stripeRows: true
},
});
I need to change the columns texts (tt1,tt2 etc) after the grid creation, without changing the header grouping.
I Tried modifying the columns property, but that doesn't help, only thing that worked so far is a reconfigure which messes with the editor.
Please advice

ExtJS provides setText method fo changing the header text.
Refer http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column

After so many searches i came up to the idea that ExtJS 4.1 "reconfigure" is buggy and has never been fixed, as it messes with the plugins (the editor in particular), and every fix i found so far targets only a particular use case, mine was just updating the grouped headers labels without touching anything else.
The solution i used is to simply update the dom (while at same time update the columns headers structure for the extjs so that if at some point their bugs are fixed it is simple to switch to reconfigure, settext or whatever), via : thegrid.container.dom.childNodes ....
I hope this helps gettings someone else from this struggle.
This is related : Using Ext.grid.Panel.reconfigure() breaks the grids RowEditing plugin

Try below code:
grid.columns[0].ownerCt.setText('Total Number');

I know this is an old thread but you can use the code Michael posted :
grid.columns[0].ownerCt.setText('Total Number');
and then use the column name in your groupHeaderTpl and have something like this :
{columnName}: {name}
This way it will dynamically change it to the values you want.

Is there a row limit for copying data into handsontable ?

When copying sevreal thousand rows into handsontable from excel it throws
Uncaught Error: Security brake: Too much TRs.
Please define height for your table, which will enforce scrollbars.
I set the height in the constructor
var options = {
height : 340,
minSpareRows : 1,
minSpareCols : 1,
colHeaders : false,
contextMenu : true,
columnSorting: true,
...
}
Same error - Is there any way to overcome this ?
Second, How can i catch this error ?

I just ran a quick test with handsontable, using 14 columns, I was able to load about 1200 rows. This is indicative of a cell number of about 16 000.
You can try lazy or delayed loading of data by adding a callback that is triggered on paste by handsontable.
Otherwise you can use the callback on paste to check the length of the data on the clipboard first and displaying an error if it is too big.
var clipText = window.clipboardData.getData('Text');
This allows you to access text from the clipboard in javascript.

Regarding your second question of displaying a scroller:
$("#myHandsontable").bind('paste', function () {
$('#updateProgress').show();
});
Then in the constructor use the after change event:
$("#myHandsontable").handsontable({
...
afterChange: function(changes, source) {
if (source == "paste") {
$('#UpdateProgress').hide();
}
}
});
Although you should try the latest version of handsontable, they really made a huge improvement in the time that it takes to paste data in the table.

I just had this issue, it is a bit misleading due to the wording of the error,
Error: Security brake: Too much TRs. Please define height for your
table, which will enforce scrollbars.
The error suggests that defining a height will force scroll bars, but in fact, I fixed it by defining a height that was small enough so scrollbars were forced on the table.
Hope my version makes more sense...
Everything seems to work fine then.

misleading jqgrid documentation : Client side sorting, but server side paging

this question has already been answered multiple times. but here I want to site that if the code provided in the documentation can't be achieved without additional codes, why it has been given there in first place. Its simply misleading. The code given in the documentation achieves paging, but while sorting, the grid data simply disappears.
Correct me if I am wrong.
jQuery("#gridid").jqGrid({
...
datatype: 'json', // can be xml
loadComplete : function () {
jQuery("#gridid").jqGrid('setGridParam',{datatype:'local'});
},
onPaging : function(which_button) {
jQuery("#gridid").jqGrid('setGridParam',{datatype:'json'});
},
...
});

You don't posted the exact reference to the documentation where you get the code. I found it here.
jqGrid is open source product which you get for free. It's practical, but you should understand, that in the case the product and its documentation could not be perfect. The part of code which you referenced could work probably in some very old version of jqGrid, but it's wrong code in the current version of jqGrid. The sense of implementing "Client side sorting, but server side paging" is very suspected at all. My old answer about the subject you would find here. I would rewrite some part of the answer now, but in general the code tested with old versions could be not full compatible with the new version of jqGrid.

I can say there is no place where intentional misleading has happened. They are giving the pluging for free though it is a very huge plugin. And the work done by people like Oleg is making it more perfect. For you question, the code related to "client side sorting and server side paging" here is the code that can solve your problems. And this was taken with the help of some old answer given by Oleg.
This is my version of code,
loadComplete: function(data) {
var $this = $(this);
if ($this.jqGrid('getGridParam', 'datatype') === 'json') {
// because one use repeatitems: false option and uses no
// jsonmap in the colModel the setting of data parameter
// is very easy. We can set data parameter to data.rows:
$this.jqGrid('setGridParam', {
datatype: 'local',
data: data.userdata,
pageServer: data.page,
recordsServer: data.records,
lastpageServer: data.total
});
// because we changed the value of the data parameter
// we need update internal _index parameter:
this.refreshIndex();
if ($this.jqGrid('getGridParam', 'sortname') !== '') {
// we need reload grid only if we use sortname parameter,
// but the server return unsorted data
$this.triggerHandler('reloadGrid');
}
} else {
$this.jqGrid('setGridParam', {
page: $this.jqGrid('getGridParam', 'pageServer'),
records: $this.jqGrid('getGridParam', 'recordsServer'),
lastpage: $this.jqGrid('getGridParam', 'lastpageServer')
});
this.updatepager(false, true);}
}
onPaging:function(){
/*this code is to fix the issue when we click on next page with some data in filter tool bar
* along with this in grid definition( in filterToolbar ) we have to return true in "beforeClear "event
* */
var data = $(this).jqGrid("getGridParam", "postData");
data._search = false;
data.filters=null;
data.page=$(this).jqGrid("getGridParam","page");
/* comment this line if you disable filter toolbar*/
$(this)[0].clearToolbar();
//Here making _search alone false will not solve problem, we have to make search also false. like in below.
$(this).jqGrid('setGridParam', { search: false, postData:data });
var data = $(this).jqGrid("getGridParam", "postData");
/*this is to fix the issue when we go to last page(say there are only 3 records and page size is 5) and click
* on sorting the grid fetches previously loaded data (may be from its buffer) and displays 5 records
* where in i am expecting only 3 records to be sorted out.along with this there should be a modification in source code.
*/
$(this).jqGrid("clearGridData");
/* this is to make the grid to fetch data from server on page click*/
$(this).setGridParam({datatype: 'json'}).triggerHandler("reloadGrid");
}
For the modification that you have to do in source code is , see this answer..

pagination not working for KO Grid

I am working with KO-grid and it seems to load all the data fine. Now, I am working on the pagination part and it does not seem to work properly. Yes, I do the pagination control on the bottom but when it comes to be able to decide the page size, it does not seem to work. The page size is driven by two options according to confguration details given on https://github.com/ericmbarnard/KoGrid/wiki/Configuration
1.pageSizes:[5,10, 25] -- seems to show options but when I change my selection from 5 to 10 then it does nto seem to work upon the choices.
2.pagesize ://somenumber -- breaks the code.
I have working model of it on jsfiddle: http://jsfiddle.net/sf4p3/46/
Any suggestions?

Well, it appears that the pagination in KoGrid doesn't work the magic that you were hoping for.
Here's a link to the example from the KoGrid wiki on GitHub:
http://ericmbarnard.github.com/KoGrid/examples/Complex-Server-Side-Paging.html
In viewing source for the HTML page, one will likely see the beginning of the view model declaration without having to scroll (depending on screen resolution, of course). Regardless, this starts around line 30.
Notice that there is an observable named pageSize in the view model, and it is set to 50.
Scrolling down a bit, one should see functions named filter, sort, and getPagedDataAsync for filtering the data, sorting the data, and creating the data set for the current page.
Here's the code for the getPagedDataAsync function:
this.getPagedDataAsync = function (pageSize, page, filterInfo, sortInfo) {
setTimeout(function () {
var data = window.getExampleData();
var filteredData = filter(data(), filterInfo);
var sortedData = sort(filteredData, sortInfo);
var pagedData = sortedData.slice((page - 1) * pageSize, page * pageSize);
self.myObsArray(pagedData);
}, 0);
};
Without seeing the details of the rest of the view model, one should be able to tell from reading the above code that this function starts by retrieving all data to be displayed for this example page, then filters the data and sorts the data.
After that, the data array is sliced to extract the data to be viewed for the current page, and that slice is passed to the myObsArray observable array that is used to display the data in the grid.
Here's the declaration of the grid in this example:
<div id="sandBox" class="example" style="height: 600px; max-width: 700px;"
data-bind="koGrid: {
data: myObsArray,
columnDefs: [
{ field: 'Sku', width: 140 },
{ field: 'Vendor', width: 100 },
{ field: 'SeasonCode', displayName: 'Season Code', width: 150 },
{ field: 'Mfg_Id', displayName: 'Mfg ID', width: 180 },
{ field: 'UPC', width: 170 }
],
autogenerateColumns: false,
isMultiSelect: false,
enablePaging: true,
useExternalFiltering: true,
useExternalSorting: true,
filterInfo: filterInfo,
sortInfo: sortInfo,
pageSize: pageSize,
pageSizes: [25, 50, 75],
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem }">
</div>
Hopefully, this helps, and you'll be able to fix your paging issues.
Regardless, please let me know if you have any questions.
UPDATE
#Californicated I'm on vacation, but I had some downtime to take a peek at your latest fiddle.
I forked what you had in your latest fiddle and made the following changes to get the paging to work:
In the declaration of observables, I changed the value of pageSize to 2 and the value of totalServerItems to 7.
In the JS, I changed the declaration of the data var in the
getPagedDataAsync function so it's retrieving the
Prizefillfilmentstatuses observable array.
On the last line of the JS code, I changed the first parameter from 50 to 2.
In the jsFiddle toolbar, I changed the first dropdown from "onLoad" to "no wrap (body)"
In the declaration of the koGrid in the HTML, I added the following options/parameters:
pageSize: pageSize,
currentPage: currentPage,
totalServerItems: totalServerItems,
selectedItem: selectedItem
The page setup was working with the JS changes, alone, but the paging tool (previous, next, etc.) was not active until I added the totalServerItems option in the koGrid declaration.
Again, let me know if you have any questions.