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

DataTables - scrollX causing squashed header

So I'm using DataTables with the scrollX parameter set to true, however it's causing the thead columns to collapse.
Note: the datatable is appearing inside a Bootstrap Modal as part of a react project.
How can I resolve this?
When I click on one of the columns, causing it to refresh, it fixes itself. Also, if I remove the scrollX it also doesn't collapse.
Initialisation code:
$('#item-search').DataTable( {
ajax: {
"data": {
type: "map_items",
map_id: this.map_id
},
"dataSrc": (r) => {
console.log(r);
return r.data;
},
type: "POST",
url: "src/php/search.php"
},
autoWidth : false,
columns: [
{
"data": "brand"
},
{
"data": "name"
},
{
"data": "quantity"
},
{
"data": "measurement"
},
{
"data": "type"
},
],
dom: 'rtlip',
language: {
"info": "Showing page _PAGE_ of _PAGES_",
"infoFiltered": ""
},
lengthMenu: [ 1, 2, 3 ],
pageLength: 1,
processing: true,
responsive: true,
scrollX: true,
select: {
style: "multi"
},
serverSide: true
});

In data table initialization include following property.
autoWidth : true
Along with add this
"fnInitComplete": function(oSettings) {
$( window ).resize();
}
"fnDrawCallback": function(oSettings) {
$( window ).trigger('resize');
}

DataTable should be initialized with the following code to achieve horizontal scrolling:
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns": {
"leftColumns": 1
}

This work in my angular project
this.dtTarifas = {
scrollX: true,
autoWidth: false,
lengthChange: false,
responsive: false
}
I have in my package.json "angular-datatables": "7.0.0"

$('#DataTableID').DataTable({
//"scrollX": true,
"initComplete": function (settings, json) {
$("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});

How to hide a particular column from the datatable?

I'm building a page where I need to display a datatable.
Based on a condition, this table should display either 5 or 6 columns.
This is my code in .js file to display the table with 6 columns:
if(Display)
{
myself.set_DataTable(myself._findjcontrol("tTable1"));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" }, //Column5
{"sType": "html"} //Column6
],
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
}
else
{
myself.set_DataTable(myself._findjcontrol("tTable_2"));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" } //Column5
],
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
}
Based on a condition, I'm repeating the code twice. Is there a way to defined some kind of property for the column, so, based on condition, I change that property and append it to a column definition. Something like this:
var isDisplay = false;
if(Display)
{
isDisplay = true;
}
else
{
isDisplay = false;
}
/* the rest of code */
{"sType": "string", isDisplay } //Column5
/* the rest of code */
Is that possible to do something like that?

If I correctly understood what you need, you can separate your settings with variables without repeating code:
var control = "tTable_2"
, columns = [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" } //Column5
];
if(Display)
{
columns.push({"sType": "html"}); //Column6
control = "tTable_1";
}
myself.set_DataTable(myself._findjcontrol(control));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": columns,
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
Also, it seems there's a feature in DataTable that could help you. Try to use the property bVisible in the column you want to hide/show:
myself.set_DataTable(myself._findjcontrol("tTable1"));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" }, //Column5
{"sType": "html", "bVisible": Display} //Column6
],
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
Hope it helps.

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"
});

Why is this line choking my jQuery dataTable?

I have a jQuery dataTable coded up like so:
$("#my-datatable").dataTable( {
"bProcessing" : true,
// Commenting out next line
//"sDom" : 't',
"sAjaxSource" : "some/url/on/my/server",
"sAjaxDataProp" : "",
"bDestroy" : true,
"fnServerData" : function(sSource, aoData, fnCallback) {
aoData.push({
"name" : "asking",
"value" : "yes"
});
request = $.ajax({
"dataType" : "json",
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
});
},
"aoColumns" : [
{
"mDataProp" : "name"
},
{
"mDataProp" : "expr"
},
{
"mDataProp" : "seq"
}
]
});
Notice the line that commented out. When this code runs as-is, the table renders beautifully. Unfortunately, it displays lots of stuff that I don't want displayed, such as pagination information, a search bar, etc.
After reading the docs and following the examples, I'm convinced that the line that is commented-out is what I need to configure the dataTable so that only the table itself renders/displays.
But, when I comment it out, I get an error in Firebug and no data populates my table:
TypeError: an is undefined
[Break On This Error]
for ( var i=0, iLen=an.length ; i<iLen ; i++ )
It seems too be complaining about jQuery.dataTables.js line 2895. Can anybody spot why this is happening? Is my sDom attribute not configured correctly? Remember, I just want the table and its headers to draw (and all the data in it). Thanks in advance!

When setting "bProcessing": true, you have to make sure the 'r' is defined inside the sDom, otherwise the error will be generated.
Example :
var oTable = $('#example').dataTable( {
"bProcessing": true,
"iDisplayLength": 10,
"bLengthChange": false,
"bFilter": false,
"aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0, 4, 5 ] }],
"sDom": "t<'row-fluid'<'span4'i><'span8'pP>r>",
"sPaginationType": "bootstrap",
"oLanguage": { "sLengthMenu": "_MENU_ records per page" }
});

I think what you are after is this perhaps
http://datatables.net/examples/basic_init/filter_only.html
you could leave sDom: T (the default) and manually turn everything off
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": false