Develop Reference

DataTable - Getting error when putting select checkbox in first column

I know it has been addressed already, but I'm just not getting it to work. I'm using DataTable Editor with resposnive and serverside. I'm getting an error when I put the checkbox in the first column like:
js:
var table = $('#mytable').DataTable( {
dom: "rt",
ajax: {
url: "/source.php",
type: "POST",
data: function (d) {
}
},
serverSide: true,
processing: true,
select: {
style: 'os',
selector: 'td:first-child'
},
columns: [
{
data: null,
defaultContent: "",
className: "select-checkbox",
orderable: false,
targets: 0
},
{ data: "logo" },
{ data: "name" },
{ data: "product" }
]
} );
That's the Error message:
DataTables warning: table id=mytable - Unknown field: (index 0)
php:
Editor::inst( $db, 'table' )
->fields(
Field::inst( 'logo' ),
Field::inst( 'url' ),
Field::inst( 'name' ),
Field::inst( 'product' )
)
... wenn putting in the last column it works:
...
columns: [
{ data: "logo" },
{ data: "name" },
{ data: "product" },
{
data: null,
defaultContent: "",
className: "select-checkbox",
orderable: false,
targets: 0
}
]
...
How can I get the checkbox in the first column? (So column 0)

add this in code
$("#table").DataTable({
'columnDefs': [{
'targets': 0,
'bSortable': false,
'render': function (data, type, full, meta){
return '<input type="checkbox"> <label>Checkbox</label>';
}
}]
})

Here the answer from the author:
You have server-side processing enabled, and the default ordering is to order on the first column. When that happens, DataTables is telling the server to order on the client-side generated column and throws an error.
Use ``order: [[1, 'desc']]` to resolve that.

Only have remove buttons for some rows?

I have a handsontable with data that would have a property that indicates a specific status (hasShipped if specifics are required). Is there a way to remove the "remove row" button from a row where the hasShipped value is true?
Table definition, in case it's important:
var hot = new Handsontable(container, {
data: hotData,
dataSchema: { Product: null, UOM: "EA", QtyShipped: 0 },
columns: [
{
data: 'Product',
title: "Product",
type: "text",
readOnly: isShipped
},
{
data: 'UOM',
title: "UOM",
readOnly: true,
type: "text"
},
{
data: 'QtyShipped',
title: "Qty<br />Shipped",
type: "numeric",
readOnly: isShipped
}],
allowInsertRow: true,
//allowRemoveRow: true, //TODO: Depending on mode and row
autoWrapCol: true,
colHeaders: true,
columnSorting: { column: 0, sortOrder: false },
contextMenu: ['undo', 'redo', 'row_above', 'row_below', 'remove_row'],
currentColClassName: 'activeCol',
currentRowClassName: 'activeRow',
dropdownMenu: true,
fixedColumnsLeft: 1,
outsideClickDeselects: false,
readOnly: <%= IsWatchList.ToString().ToLower() %>,
removeRowPlugin: true,
rowHeaders: true,
stretchH: "all", //used in conjunction #hot-container styling to make the table take up 100% of parent width
});

Given that I was already implementing the code to remove a row and had altered the code to insert my own custom styled button, I knew where the buttons were being injected.
Thanks to MonkeyZues's comment, I looked at the code where I was injecting the remove row button and, depending on the value of the HasShipped property, was able to inject (or not) the required row buttons
if (jsonObject != "") {
if (jsonObject.LoadDetails[row]["HasShipped"] == true) {
div.appendChild(btnNode);
elem.appendChild(div);
}
}

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 sort only certain columns

I am using jQuery DataTables plugin to sort table data. I have four columns: Name, Position, Office and Age. What I want is user to be able to sort only Name and Age columns, not all the columns. But I am not able to stop sorting on OTHER columns. Can you please suggest something?

This code disable sorting, 0 - index of column.
For old version
aoColumnDefs: [
{
bSortable: false,
aTargets: [ 0 ]
}
]
for DataTables 1.10+
columnDefs: [
{ orderable: false, targets: 0 }
]
Especially for example, you need this
$(document).ready(function() {
$('#example').dataTable( {
"order": [[ 0, "desc" ]],
"aoColumns": [
null,
{ "bSortable": false },
{ "bSortable": false },
null
]
} );
} );
fiddle

DataTables: search all columns when server-side

I'm using IgnitedDatatables (CodeIgniter library) for DataTables. The table gets generated without problems but if I search/filter it can only filter one column at a time. If I set "bServerSide" to false it works but then I lose the server-side functionality.
In the examples, this one is working:
http://datatables.net/release-datatables/examples/ajax/custom_data_property.html
while this isn't (server-side):
http://datatables.net/release-datatables/examples/data_sources/server_side.html
Is this not possible to achieve when running server-side?
This is my JSON response (shortened and with replaced data):
{"sEcho":0,"iTotalRecords":45438,"iTotalDisplayRecords":45438,"aaData":[["abc","12345","example#example.com","","","2010-01-27 22:31:10","Edit<\/a> Delete<\/a>"],["abc2"," test123","test#test.com","","","2008-06-15 22:09:33","Edit<\/a> Delete<\/a>"]],"sColumns":"fname,lname,email,phone,cellphone,created,edit"}
JavaScript code:
$("#members").dataTable( {
"bProcessing": true,
"bServerSide": true,
'sAjaxSource': '<?php echo base_url();?>members/listener',
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": 'POST',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"bLengthChange": false,
"aaSorting": [[ 0, "asc" ]],
"iDisplayLength": 15,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumnDefs": [
{ "sName": "fname", "aTargets": [ 0 ] },
{ "sName": "lname", "aTargets": [ 1 ] },
{ "sName": "email", "aTargets": [ 2 ] },
{ "sName": "phone", "sWidth": "80px", "aTargets": [ 3 ] },
{ "sName": "cellphone", "sWidth": "100px", "aTargets": [ 4 ] },
{ "sName": "created", "sWidth": "120px", "aTargets": [ 5 ] },
{ "bSortable": false, "sName": "edit", "sWidth": "115px", "aTargets": [ 6 ] }
]
});
Thank you!

Well, the problem if you filter server side is that you are filtering through an SQL query and this is what is written on the example you posted;
Filtering
NOTE this does not match the built-in DataTables filtering which does it
word by word on any field. It's possible to do here, but concerned about efficiency
on very large tables, and MySQL's regex functionality is very limited
Basically you could do what you want to do (a regular expression match an all columns) but it's going to kill the performance server side.
What i usually do is provide a filter for each column, i need to filter.