I'm using jQuery Datatable to display data. I am trying to download the data in csv format. It is working fine for around 14-15K rows of data but the browser is being unresponsive when the data is exceeding 16K rows. Here is the code:
JS Code
function createDataTable(data) {
selectedDealer = [];
allDealerData = data;
table = null;
table = $('#table_id').DataTable({
"dom" : "Bfrtip",
"data" : data,
"columns" : [ {
"data" : "id"
}, {
"data" : "dlrName"
}, {
"data" : "dlrName"
}, {
"data" : "pyramid"
}, {
"data" : ""
} ],
'columnDefs' : [ {
'targets' : 0,
'orderable' : false,
'searchable' : false,
'className' : "col-hidden",
'render' : function(data, type, full, meta) {
return data;
}
}, {
'targets' : 1,
'render' : function(data, type, full, meta) {
return data.substring(0, 11);
}
}, {
'targets' : 2,
'render' : function(data, type, full, meta) {
return data.substring(12);
}
}, {
'targets' : 4,
'width' : '0%',
'render' : function(data, type, full, meta) {
return 'Y';
}
} ],
stateSave : true,
buttons : [ {
extend : 'csv',
exportOptions : {
columns : [ 0, 1, 2, 3, 4 ]
}
} ]
});
addTableEvents();
}
Is there any solution to avoid this? Please help.
Related
Good morning. I made a data search & filter with datatables and it worked .. but when I moved the page and returned to that page the data was still stuck (not reset). In view I made it like the following image:
and in the js file I made it like this
brandmanage = $('#brandmanage').DataTable({
dom : 'rtpi',
pageLength: {{ $limit ?? '10' }},
language : {
paginate : {
previous : '<i class="fa fa-angle-left"></i>', // or '←'
next : '<i class="fa fa-angle-right"></i>', // or '→'
},
},
processing : true,
drawCallback : function( settings ) {
$('#lengthInput option[value={{ $limit ?? '10' }}]').attr('selected','selected');
},
serverSide : true,
stateSave : true,
ajax : {
url : "{{ route('lms.brand.getdata',['pfx'=>$pfx]) }}",
dataType : "json",
type : "POST",
data : { _token: "{{csrf_token()}}" }
},
columns : [
{ data : "brand" },
{ data : "corporate" },
{ data : "num_of_company" },
{ data : "primary" },
{ data : "secondary" },
{ data : "status" },
{ data : "action",
orderable : false,
className : "text-center",
},
],
});
$('#brandDataLength').on('change', function () {
brandmanage.page.len( $(this).val() ).draw();
});
$('#searchBrand').on('keyup', function () {
brandmanage.search( this.value ).draw();
});
What do I do so that when I have moved pages, the search results can be reset?
If you change stateSave to false, then dataTables will not remember the selected filters etc. Thereby the search results will be reset when you reload the page.
I have datatable that is being reloaded on every 5 minuts using ajax.reload().
This table has a row named as CIP.
Now on each reload I want to highlight the CIP row where value is unchanged from last value.(Value received on previous ajax call).
function getSkillStats() {
table = $('#example').DataTable( {
"ajax": {
"type" : "GET",
"url" : "../SkillStateManagement",
"dataSrc": function ( json ) {
//Make your callback here.
return json.data;
}
},
colReorder: true,
scrollY: "600px",
scrollX: false,
scrollCollapse: true,
paging: false,
select: true,
'columnDefs': [
{ width: 50, targets: 0 },
{ width: 50, targets: 1 },
{
'targets': 0,
'checkboxes': {
'selectRow': true
}
}
],
fixedColumns: true,
processing:true,
"language": {
"loadingRecords": ' ',
processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span> '
},
columns: [
{ "data" : "calls_Failed" },
{ "data" : "queuer_Threads" },
{ "data" : "calls_In_Progress" },
{ "data" : "skill_Id" },
{ "data" : "calls_Connected" },
{ "data" : "sys_Busy" },
{ "data" : "max_Cip" },
{ "data" : "queuer_name" }
]
} );
}
$(document).ready(function () {
getSkillStats();
setInterval(function () {
table.ajax.reload();
}, 300000);
} );
you can use row callback https://datatables.net/reference/option/rowCallback
The idea, is that you store the previous call and then use the row callback to check if data was unchanged (based on skillId you check the previous Cip value), then if it is you add some special class like "unchanged" ...
$('#example').dataTable( {
....
"rowCallback": function( row, data ) {
if (unchangedCid(data[4], data[7]) ) {
$('td:eq(7)', row).addClass("unchanged"); // unchanged should be defined in css
}
}
} );
and with function unchangedCid like :
var unchangedCid = function(id, cid) {
// search logic goes in search function ...
if(search(id) = cid) {
return true;
}
return false;
}
I use datatable to render column and rows fron a json.
data variable is the json.
"columns" : [
{ "data" : "id" },
{ "data" : "username" },
{ "data" : "email" },
{ "data" : "site" },
{ "data" : "author_name" },
{ "data" : "user_name" },
{ "data" : "city" },
{ "data" : "region" },
{ "data" : "added" },
{ "data" : "member_status" },
{ "data" : "its_username" },
{ "data" : "register_date" },
{"defaultContent": "<a href='/admin/edit_recruited_user/' class='btn btn-primary'><i class='fa fa-edit'></i></a><a href='/admin/delete_recruited_user/' class='btn btn-danger'><i class='fa fa-trash'></i></a>"}
],
I am trying to add the value from id to my link /admin/edit_recruited_user/
Have any ideea if i can achieve this or i should rethink the datatables code ?
Add columnDefs.
See documentation https://datatables.net/reference/option/columns.render
$.getJSON('https://api.myjson.com/bins/1u28t', function(json) {
$('#example').DataTable({
data : json.data,
columns : [
{ data : 'Id' },
{ data : 'Name' },
{ data : 'Alias' }
],
columnDefs: [ {
"targets": 0,
"data": "download_link",
"render": function ( data, type, row, meta ) {
return '<i class="fa fa-edit"></i><i class="fa fa-trash"></i>';
}
}]
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table id="example"/>
How to refresh the Datatable, When new Json data is sent
POST request Receives data , which is sent to LoadTable function to populate the datatable.
function initializeTable(){
$("#submitbutton").on(
'click',
function(){
$.ajax({
type : 'POST',
url : 'rest/log/events',
data : {
fromTime : $("#fromTime-filter").val(),
toTime : $("#toTime-filter").val(),
Text : $("#search-filter-input").val()
},
success : function(data) {
loadTable(data);
},
error : function(jqXHR, textStatus, errorThrown) {
showAjaxError(jqXHR, textStatus, errorThrown,
$("#error-msg"));
}
});
});
}
'data' is passed to Load function, which loads the data to a table correctly the first time.
When i submit the POST request the second time, i see New 'data' in the browser console, but the Datatable is not refreshed.
But when i Refresh the Page(datatable is cleared) and then do a new POST, new data loads normally. I want the new data to be loaded without the need to refresh the page.
function loadTable(data)
{
$('#report-table').dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
}
It looks to me like you're using DataTables v1.9. Here's how I'd do it:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnUpdate(data);
}
}
Another option:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnDestroy();
loadTable(data);
}
}
I want to read json data in extjs here is my code below.
What i'm doing wrong ? I'm pretty new at Extjs.
I think i couldn't get the json value, or couldn't properly write it down on panel.
Thanks in advance.
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
var urlGetName = '${ctx}/main/list';
Ext.define('DataObject', {
extend : 'Ext.data.Model',
fields : [ 'name' ]
});
var storeName = Ext.create('Ext.data.Store',{
model:'DataObject',
autoLoad : false,
proxy : {
type : 'ajax',
actionMethods: {
read: 'GET'
},
reader : {
type : 'json',
root: 'data',
},
api : {
read: urlGetName
}
},listeners: {
load: function(store, records) {
dataa =store.getAt(0).get('data');
}
}
});
Ext.onReady(function() {
var firstGridStore = Ext.create('Ext.data.Store', {
model : 'DataObject',
data : dataa
});
var columns = [ {
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
} ];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var urlL = '${ctx}/main/list';
var param = data;
postDataAsParamsINN({param:param},urlL,function(resp){
var success=resp.success;
if(success){
Ext.MessageBox.alert('succes', 'bravaa');
}else{
Ext.MessageBox.alert('error','eroross' );
}
});
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
});
You shouldn't use two stores to fill the one with the other. Delete the FirstGridStore and use the predefined remote store instead:
// Model
Ext.define('DataObject', {
extend : 'Ext.data.Model',
fields : [ 'name' ],
idProperty: 'name'
});
// Store
var storeName = Ext.create('Ext.data.Store',{
model:'DataObject',
autoLoad: true,
queryMode: local,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
reader: {
type : 'json',
root: 'data',
},
api: {
read: urlGetName
}
}
});
// Grid
var columns = [{
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var urlL = '${ctx}/main/list';
var param = data;
postDataAsParamsINN({param:param},urlL,function(resp){
var success=resp.success;
if(success){
Ext.MessageBox.alert('succes', 'bravaa');
}else{
Ext.MessageBox.alert('error','eroross' );
}
});
}
}
},
store : storeName, // defined store
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
});