I am trying to use "Fixed columns" feature in datatables with remote data pulled using ajax. Everything works perfectly without any errors. However, the "Fixed columns" feature doesn't work. Below is my code
$('#dataTable').DataTable({
"order": [[ groupColumn, "asc" ]],
"rowReorder": true,
"dom": 'l<"toolbar">frtip',
"scrollX": true,
"bscrollCollapse": true,
"displayLength": 25,
"fixedColumns": true,
"columnDefs": [
{ "visible": false, "targets": groupColumn },
{ "orderable": true, "targets": groupColumn },
{ "orderable": false, "targets": "_all" }
],
"processing": false,
"pageLength": 60,
"ajax": {
url: "http://example.com/output",
type: 'post',
data: {id:id}
},
"columns": {
//column definitions provided here
}
});
Related
Datatables allows you to use shift+select, while also allowing you to select single items without losing previously selected items by having the select style set to multi+shift.
'select': {style': 'multi+shift'}
However, for this datatable, that doesn't seem to work at all. What am I missing?
var $testTable = $("#test-list").DataTable({
"dom": '<"dataTables_top"i<"dataTables_custom_buttons">f>rt'+ '<"dataTables_bottom"ilp>',
"autoWidth": false,
"lengthChange": 100,
"lengthMenu": [[10, 25, 100, 200, 500, 1000], [10, 25, 100, 200, 500, 1000]],
"paging": true,
"pagingType": "full_numbers",
"stripeClasses": [ 'odd', 'even' ],
"order": [[1, 'asc']],
"language": {
"emptyTable": '<h3>Test...</h3>',
"search" : '',
"sLengthMenu" : "_MENU_ Per Page",
"info": "Showing _START_ to _END_ of _TOTAL_",
paginate: {
first: '<i class="fad fa-step-backward"></i>',
previous: '<i class="fad fa-backward"></i>',
next: '<i class="fad fa-forward"></i>',
last: '<i class="fad fa-step-forward"></i>'
}
},
'select': 'multi+shift',
"aoColumnDefs": [
{
"targets": [-1,-2,-3,-4,-5,-6,-7,-8,-9,-11],
'searchable': false
},
{
"targets": 'no-sort',
"orderable": false,
},
{
"targets": [8,11],
"visible": false
},
{
"iDataSort": 8,
"aTargets" : [7]
},
{
"iDataSort": 11,
"aTargets" : [10]
},
{
"targets": -1,
'searchable': false
}
],
"initComplete": function() {
......
},
"drawCallback": function(settings) {
......
}
});
I have a table is using datatable and Ajax to get data on load.
const oTable = $('#product').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajax/admin/getproductlist/ajax.php",
"type": "POST"
},
"responsive": true,
"columnDefs": [
{
"targets": [-1],
"searchable": false,
"orderable": false
},
{
"targets": [1, 9, -2],
"width": "5%",
},
{
"targets": [1, -1],
"width": "10%",
},
{
"targets": [0, 2, 5, 6, 7, 8],
"width": "15%",
},
{
"targets": [3, 4],
"width": "30%",
"orderable": false, << This worked
"visible": false << DOESN't work
}
],
"columns" : [
{ "data": "sku" },
{ "data": "master" },
{ "data": "thumbs", "orderable": false }, << This worked
{ "data": "name", "orderable": false }, << This worked
{ "data": "name_fr", "visible" : false }, << DOESN't work
{ "data": "product_tags", "orderable": false }, << This worked
{ "data": "brand_tags", "orderable": false }, << This worked
{ "data": "label_tags", "orderable": false }, << This worked
{ "data": "mer_tags", "orderable": false }, << This worked
{ "data": "status", "orderable": false }, << This worked
{ "data": "quantity_in_stock" },
],
"initComplete": function(settings, json) {
$('#dataTables-list-Product_filter input').unbind();
$('#dataTables-list-Product_filter input').bind('keyup', function(e) {
if (e.keyCode == 13) {
oTable.search(this.value).draw();
}
});
$('#dataTables-list-Product_filter input').bind('change', function(e) {
oTable.search(this.value).draw();
});
},
});
I want to hide the columns when table finishes loading.
Let's take an example for name_fr. I tried to add visible: false to config option but somehow this column always shows up again after page stop loading. The orderable: false works fine.
I did add break point to debug the process. When table initialized, this column was hidden but after that something called it showing up again.
The column was only hidden when I click on checkbox that I make a function to show/hide.
$('input[id^="toggle_vis_"]').on('click', function(e) {
var column = oTable.column($(this).attr('data-column'));
$(this).val() == 1 ? column.visible(false) : column.visible(true);
});
So, I tried to but this to ready() function to hide column when page loaded.
$(document).ready(function() {
var column = oTable.column(4);
column.visible(false);
});
And...it didn't work as well. :(
Would you please give me an idea how can I solve this problem?
Thank you #andrewjames to help me find out my problem.
There was a conflict between orderable: false and responsive: true.
The option responsive: true brought back my columns when finishing loading.
Solution: Remove or edit responsive to false
var oTable = $('#Product').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "/ajax/admin/getproductlist/ajax.php",
"type": "POST"
},
...
...
"responsive": false,
...
...
});
Cheers.
Would Appreciate some assistance reviewing this code and letting me know what I may be doing wrong. I am using ajax with vb.net mvc to load data using json to the view. However, the table is not sorting to show by group.
var table = $("#TblGridInfo").DataTable({
scrollX: true,
processing: true, // for show progress bar
serverSide: true, // for process server side
filter: true, // this is for disable filter (search box)
orderMulti: true, // for disable multiple column at once
pageLength: 10,
responsive: true,
ajax: {
url: "/GenerateReport/LoadMCCProductionReport",
type: "POST",
datatype: "json",
},
columns: [
{ data: "MCC", "name": "MCC", "autoWidth": true },
{ data: "Branch", "name": "Branch", "autoWidth": true },
{ data: "MerchantProfileNum", "name": "MerchantProfileNum", "autoWidth": true },
{ data: "BusinessName", "name": "BusinessName", "autoWidth": true },
{ data: "MerchantCode", "name": "MerchantCode", "autoWidth": true },
{ data: "Months", "name": "Months", "autoWidth": true },
{ data: "TotalTrans", "name": "TotalTrans", "autoWidth": true },
{ data: "Volume", "name": "Volume", "autoWidth": true }
],
order: [[0, "asc"]],
rowGroup: {
dataSrc: "MCC"
}
});
Have a table with some data loaded from server by provised ajax to DataTable, also have yadcf for filtering on server side. In one of columns i have select2 box, in what i want see only predefined (loaded from server) options (in example on jsfiddle it is opt variable), but options in select2 contains also data from column. How i can disable adding column data, and stay only loaded from server options?
https://jsfiddle.net/6ssh8mg4/
code:
var opts = [{id:0, text:"Some 1"},{id:1, text:"Some 2"}];
var table = $("#docTable").DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: true,
deferRender: true,
pageLength: 10,
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
columns: [
{ "data": "Identifier", className: "nowrap" },
{ "data": "Name" },
]
});
yadcf.init(table, [
{ column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
{
column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
select_type_options: {
data: opts,
width: '180px',
dropdownAutoWidth: true,
}
},
]);
You should use the data attribute (in your case with data/label properties), read the docs
Here is a working sample
var opts = [{value:0, label:"Some 1"},{value:1, label:"Some 2"}];
var table = $("#docTable").DataTable({
processing: true,
serverSide: false,
paging: true,
ordering: true,
deferRender: true,
pageLength: 10,
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]],
columns: [
{ "data": "Identifier", className: "nowrap" },
{ "data": "Name" },
]
});
yadcf.init(table, [
{
column_number: 0, filter_type: "text", style_class: "form_control", filter_default_label: "" },
{
data: opts,
column_number: 1, filter_type: "select", select_type: "select2", filter_default_label: "",
select_type_options: {
width: '180px',
dropdownAutoWidth: true,
}
},
]);
jsfiddle
horizontal scroll in datatable.net not aligning headers with actual column data on scrolling.
On scrolling table body gets moved but headers doesn't. I want to set headers scrollable.
My Code sample ::--------
$('#abc').dataTable({
"aaData": userContactGridData,
"bAutoWidth":false,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["icon", "adminRoleIcon", "gearIcon"] },// disable sorting on first and last column
{ "sWidth": "20px", "aTargets": ["icon", "gearIcon"] },
{ "sWidth": "200px", "aTargets": ["userName"] },
{ "sClass": "icon", "aTargets": ["icon"] },
{ "sClass": "gearIcon", "aTargets": ["gearIcon"] },
{ "sClass": "userName", "aTargets": ["userName"] },
{ "sClass": "adminRoleIcon", "aTargets": ["adminRoleIcon"] },
{ "bVisible": false, "aTargets": ["adminRoleIcon"] },
],
"sDom": 'C<"H"Tfr>t<"F"ip>',
"iDisplayLength": 6,
"bProcessing": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[2, "asc"]], // sort by name by default
"sScrollX": "100%",
"bScrollCollapse": true
});
Try adding sScrollX: 100% and bScrollCollapse: true
Then your code look like as below
var oTable;
$(document).ready(function () {
oTable = $("#yourElementName").dataTable({
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "aTargets": [0], "bSortable": true },
{ "aTargets": ['_all'], "bSortable": false}],
"aaSorting": [[0, 'asc']]
});
setTimeout(function () {
oTable.fnAdjustColumnSizing();
}, 10);
});