The Datatables feature to hide columns using visible: false is ignored when stateSave is true. Does anyone have a fix or workaround for this?
Columns 1 and 2 should be hidden but are not. If you set stateSave to false, then they correctly get hidden. I have a JSfiddle test case here.
$(document).ready(function (){
var table = $('#example').DataTable({
stateSave: true,
"columnDefs": [
{ "visible": false, "targets": [1, 2] }
]
});
});
Related
I'm using DataTables 1.11.3 and load data by ajax like this, and all events catchers work ok. But if I remove ajax option and put "data": ta_data, events don't work at all, no one. Then if I put by button 'cklick' ajax source and redraw events work again Events don't work with static load data from local variable data ?
$(document).ready(function(){
"use strict";
const ta_data = JSON.parse(ta).data;
let table_arch = $("#datatable-archive").DataTable({
"scrollY": '60vh',
"scrollX": false,
"paging": false,
"searching": false,
"info": false,
"order": [[ 10, "desc" ]],
"ajax": {
"url": 'rest/data/history/' + last_date,
"error": function(a,b,c){showErrorModal(a,b,c); offSpinner();}
},
})
.on( 'preDraw', function() {sp = {buy:0, sell:0, buyErr:0, sellErr:0};})
.on( 'draw.dt', function() {
$.when(offSpinner()).then(
function(){
gageMaker(sp, "Accuracy");
commonDonut();
}
)
});
});
It's necessary to change order. First set event catchers then initialize the table
const ta_data = JSON.parse(ta).data;
let table_arch = $("#datatable-archive"))
.on( 'draw.dt', function() {
$.when(offSpinner()).then(
function(){
gageMaker(sp, "Accuracy");
commonDonut();
}
)
}).DataTable({
"scrollY": '60vh',
"scrollX": false,
"paging": false,
"searching": false,
"info": false,
"order": [[ 10, "desc" ]],
"data" : ta_data
},
})
This is my problem:
Return right rows→
table.column( 2 ).search('aaa').draw();
Don't return anything→
table.column( 2 ).search('aaa|bbb', true, false ).draw();
I'm using these settings of datatable↓
scrollY: "350px",
scrollX: true,
scrollCollapse: true,
processing: true,
serverSide: true,
"ajax": {
"url": "djangoviews",
"type": "GET",
//"success" : back
},
searching: true,
//fixedHeader: true,
responsive: false,
fixedColumns: true,
"search": {
"regex": true
},
I'm using severprocessing.
finally I find the reasen.
when I use serverSide option on datatable settings.
column regex search goes don't work.
But why... I really don't know about it.
and other people may be same situation.
I want to discus about it...
i am trying to setup a true/false filter with the yadcf plugin. As far as i can tell, it works fine and the filtering works fine, until after you have performed a search. At which point the select list is no longer rendered (Even clearing the filter doesn't bring it back) and a page refresh is needed to bring it back.
Here are some screenshots that should help demonstrate the problem.
This is before a search has been performed
This is after a search has been performed
Here is the datatable/yadcf init (I've removed some code for brevity).
_grid.init({
loadingMessage: 'Loading...',
src: _connectionsTable,
dataTable: {
ajax: {
url: _connectionsTable.data('url')
},
columns: [
{
data: 'IsAssigned',
sortable: false,
"render": function (data, type, full, meta) {
return (data === false
? '<span class="label label-sm label-danger"> No </span>'
: '<span class="label label-sm label-success"> Yes </span>');
}
}
],
dom:
"<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
initComplete: function (settings, json) {
var _table = new $.fn.dataTable.Api(settings);
// search options
yadcf.init(_table, [
{
column_number: 11,
data: [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }],
filter_container_id: 'IsAssignedFilter',
filter_reset_button_text: false,
style_class: 'form-control form-filter input-sm'
}
]);
},
order: [
[1, 'desc']
],
responsive: true,
stateSave: true
}
});
The other types of searches seem to be working ok, but this is the first one i have provided static data for. Also Chrome dev tools doesn't show any errors when this happens.
Any help is appreciated!
You should not init yadcf in initComplete , instead do it after you init datatables, like this:
var oTable = $('#example').DataTable({...});
yadcf.init(oTable, [{column_number: 0}]);
Currently I'm using DataTables in each page initializing them individually like this.
var table = $('#' + '<%= gvReports.ClientID %>').DataTable({
"responsive": true,
"bAutoWidth": true,
"oLanguage": {
"sSearch": "Search Table: ",
"sSearchPlaceholder": "Search records",
"sEmptyTable": "No data available to display"
},
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
"sScrollY": "55vh",
"scrollCollapse": false,
"pagingType": "full_numbers",
"lengthMenu": [[25, 50, 100, 150, 200], [25, 50, 100, 150, 200]]
});
When I tried to create a generic JQuery method to use in multiple places the type attribute in columnDef is not working properly
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
Im using NatualSort plugin to sort the data as the column '0' contains alphanumeric data.
Is there a way i can set the columnDefs dynamically? or to set the ColumnDef Type for Column(0) after I initialize the table?
Something Like
table.column("0:visible").Type('natural-nohtml');
Any help is appreciated? I want to know if I'm thinking in right way?
There is no way that you can manipulate columnDefs after the dataTable is initialised. However, when you basically just want to set natural-nohtml as type for the first column for any dataTable, then you could simply extend $.fn.dataTable.defaults. Declare this before you initialise any dataTable :
$.extend( true, $.fn.dataTable.defaults, {
columnDefs: [
{ targets: [0], type: 'natural-nohtml' }
]
} );
This will set any dataTables' first column to type natural-nohtml.
In My website I am using data tables for display data. Now The issue is If there are 10 records than the default pagination is not display but when there are more than 10 records the pagination of data table should display.
This is how I initialize datatable
$(document).ready(function(){
$('#tbl_member').dataTable({
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
});
This datatable code is when I done server side processing:-
var save_method;
var table;
$(document).ready(function() {
table = $('#table').DataTable({
oLanguage: {
sProcessing: "<img src='<?php echo base_url();?>assets/img/loader.gif'>"
},
"processing": true,
"serverSide": true,
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo base_url();?>Technology/technology_list",
"type": "POST"
},
"columnDefs": [
{
"targets": [ -1 ],
"orderable": false,
},
],
});
});
Use bPaginate (old hungarian notation style) or paginate to turn pagination on or off. You can use expressions to determine the options :
$('#tbl_member').dataTable({
"bPaginate" : $('#tbl_member tbody tr').length>10,
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
This works in both 1.9.x and 1.10.x versions of dataTables. Demo showing two tables with the one having less than 10 records, the other a lot more -> http://jsfiddle.net/t2xcfLap/3/
Hide pagination controls after an AJAX update. Assuming the JSON reponse is on the form
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
[...],
]
}
then
table.on('xhr', function(e, settings, json, xhr) {
if (json.recordsTotal<10) {
$("#example_paginate").hide();
$("#example_length").hide();
} else {
$("#example_paginate").show();
$("#example_length").show();
}
})
demo -> http://jsfiddle.net/yyo5231z/
The injected controls is named on the form <tableId>_length, <tableId>_paginate. So if your table have the id table, then the above should be $("#table_paginate").hide(); and so on.
The reason for the different approach compared to the first answer with a static table is, that you cannot change pagination on the fly without re-initialising the table.