Develop Reference

Error rowGroup Datatable in PHP - Uncaught TypeError: Cannot set properties of undefined (setting 'RowGroup')

function PERSYARATAN() {
$('#persyaratan_table').DataTable({
"columns": [{
"orderable" : true,
"class" : "text-center",
"width" : "5%",
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : true,
"class" : "text-left",
// "class" : "hide_column",
},
{
"orderable" : true,
"class" : "text-left"
},
],
order: [[3, 'asc']],
rowgroup: {
dataSrc: 3
},
"processing": true,
"serverSide": true,
"autoWidth" : false,
"searching" : true,
"stateSave" : true,
"bDestroy" : true,
"iDisplayLenght" : 10,
"sPaginationType": "simple_numbers",
"language": {
"url": "../plugins/datatables/Indonesian.json"
},
"ajax": function (data, callback, settings) {
$.ajax({
"url" : "/persyaratanperaturanizin",
"type" : "GET",
"data" : data,
"error" : function(xhr) {
ERROR_ALERT(xhr);
callback({
draw: 1,
data: [],
recordsTotal: 0,
recordsFiltered: 0
});
},
"success": function (data) {
var respons = data.respons;
if (respons.success == 1) {
no = respons.data.data.lenght;
callback(respons.data);
}
}
});
}
});
}
Thats my js code datatable
i want to use row group datatable and i get this error
Uncaught TypeError: Cannot set properties of undefined (setting 'RowGroup')
https://i.stack.imgur.com/W6STt.png
i already call
https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap4.min.css
and
https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js
how fix this error

jQuery DataTable : Browser is becoming unresponsive while downloading 16K rows to CSV

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.

How to search multiple columns of the datatable based on this code?

DataTable is able to create.Now i can only able to search the column named 'No'. My requirement is to search any number of desired colums of the datatable.Is there any problem by doing like this? can anyone help?
dmhTable = $('#tableId').dataTable({
"bProcessing": true,
"bDestroy": true,
"bServerSide" : true,
"bLenthChange" : false,
"iDisplayLength" : 10,
"sAjaxSource" : "searchHistoryByFromAndToDate.html?fromDate="+ $('#txtFromDate').val() +"&toDate="+ $('#txtToDate').val(),
"oLanguage" : {
"sSearch" : "Search"
},
"aoColumns" : [{"sTitle" : "Sl No","mData" : null,"aTargets": [ 0 ],
"fnRender" : function(obj) { var columnIndex = obj.oSettings._iDisplayStart + obj.iDataRow+1
return columnIndex;
}
},
{"sTitle" : "ID","mData" : "ID", "bSearchable" : false,"bVisible":false},
{"sTitle" : " No","mData" : "No", "bSearchable" : true},
{"sTitle" : " Type","mData" : "Type", "bSearchable": true},
{"sTitle" : "Message","mData" : "Message", "bSearchable": true}
],
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
});
},
"sPaginationType" : "full_numbers"
});

Clicking a button generated by Javascript with Selenium

I'd like to use Selenium or other package to automatically click the "Copy" button on one web page.
It seems that the button is generated by Javascript. Is it possible to do so? Thanks in advance!
<script src="media/portal/js/table-maker.js" type="text/javascript"></script>
Here is the piece of code in table-maker.js related to the "Copy" button:
this.generateEntityTable = function(entityName, ajaxDataProperty,
urlSuffix, objectHeadings, objectFields, hiddenFields,
tableSelector, tableId,
emptyMessage) {
if (!emptyMessage) {
emptyMessage = "No data available in table";
}
var oTable = $(tableSelector);
var tableElt = oTable[0];
var tableSource = {
"sourceType" : "json",
"structure" : {
"headings" : objectHeadings,
"fields" : objectFields
}
};
TableUtils.buildTableHtml(tableElt, tableSource.structure.headings);
var tableToolsProps = null;
if ('portalFile' == entityName) { // table does not allow row selection.
tableToolsProps = {
"aButtons" : []
};
} else if ('bspsample' == entityName) {
tableToolsProps = {
"aButtons" : [{
"sExtends": "copy",
"mColumns": "all"
},
{
"sExtends": "csv",
"mColumns": "all"
},
{
"sExtends": "xls",
"mColumns": "all"
}],
"sSwfPath" : "media/table-tools-2.1.5/media/swf/copy_csv_xls.swf"
};
} else {
tableToolsProps = {
"sRowSelect": "single",
"aButtons" : []
};
}
// this is to prevent DataTables from putting warnings or errors in an alert box.
$.fn.dataTableExt.sErrMode = 'throw';
try {
oTable.dataTable({
"bDestroy" : true,
"bRetrieve" : true,
"bJQueryUI" : true,
"bProcessing" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : initialUrl + "rest/"+ urlSuffix,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"success": function(result){fnCallback(result);},
"failure":function(result){alert('failure');}
} );
},
"sAjaxDataProp" : ajaxDataProperty,
"aoColumns" : this.fieldsToColumnProperties(objectFields, objectHeadings,
hiddenFields, entityName, tableSelector, tableId),
"sDom": 'T<"clear">lfrtip',
"oTableTools": tableToolsProps,
"oLanguage": {
"sEmptyTable": "Please wait - Fetching records"
},
fnInitComplete: function(oSettings){
oSettings.oLanguage.sEmptyTable = emptyMessage;
$(oTable).find(".dataTables_empty").html(emptyMessage);
}
});
} catch (err) {
var messageHandler = new MessageHandler();
messageHandler.showError("Internal client error: " + err + " Unable to create table for entity: "
+ entityName);
};
// this is required for row_selected styles to work.
oTable.addClass('display');
oTable.show(); // in case it was hidden
return oTable;
};

Chaining methods that have on your body ajax call

I have this class:
function Clazz() {
this.id;
this.description;
}
Clazz.prototype._insert = function(_description, _success, _error) {
this.description = _description;
$.ajax({
type : "PUT",
url : "api/route",
data : JSON.stringify(this),
dataType : "json",
contentType : "application/json;charset=UTF-8",
success : function() {
_success($("#message"), 'OK');
},
error : function() {
_error($("#message"), 'FAIL');
}
});
};
Clazz.prototype._findAll = function(_callback) {
$.ajax({
type : "GET",
url : "api/route",
dataType : "json",
success : function(data) {
_callback(data);
}
});
};
On the button click, I have this:
var clazz = new Clazz();
clazz._insert($("#description").val(), success, error);
clazz._findAll(loadCallback);
Below the loadCallback method:
function loadCallback(data){
var oTable = $('#table').dataTable({
"bRetrieve": true,
"bDestroy" : true,
"bFilter" : false,
"bLengthChange" : false,
"bInfo" : false,
"sDom" : "<'row'<'span5'l><'span5'f>r>t<'row'<'span5'i><'span5'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sProcessing" : "Loading ...",
"sZeroRecords" : "No records",
"oPaginate" : {
"sNext" : "",
"sPrevious" : ""
}
},
"iDisplayLength" : 4,
"aaData" : data,
"aoColumnDefs" : [
{ "aTargets" : [0], "mData" : "description", "sTitle" : "My Data" },
{ "aTargets" : [1],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img01.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [2],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img02.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [3],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img03.png" style="height: 20px; width: 20px;"/>';
}
}
],
"fnHeaderCallback" : function( nHead ) {
$(nHead.getElementsByTagName('th')[0]).attr("colspan","4");
for(var i = 1; i <= 3; i++){
$(nHead.getElementsByTagName('th')[1]).remove();
}
},
"fnRowCallback" : function( nRow ) {
$(nRow.getElementsByTagName('td')[1]).attr("width","20px");
$(nRow.getElementsByTagName('td')[2]).attr("width","20px");
$(nRow.getElementsByTagName('td')[3]).attr("width","20px");
}
});
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
I want that the method clazz._findAll(loadCallback); only execute after the clazz._insert finish.
I already tried $.when but it did not work.

$.when should work if clazz._insert returns the $.ajax function call (which it currently does not).
If you return the $.ajax call, you should be able to do something like:
$.when(clazz._insert(...stuff...)).then(clazz._findAll(...stuff...));
Might be a good idea to double-check the documentation on deferred objects.

I solved doing this:
Putting return $.ajax(...stuff...) in the insert method
Using
$.when(clazz._insert($("#description").val())).done(
function(){
clazz._findAll(loadCallback);
}
);
I had to call the _findAll inside an anonimous function.