Is it possible to change datatable column settings value on fly.I need to hide some columns dynamically while invoking some methods.Already try something like this:
var columns = [{ "bVisible": true, "sTitle": "Date" },
{"bVisible": true, "sTitle": "Time" }];
var myTable= $('#myTable').dataTable({
"bPaginate": false,
"bFilter": true,
"sScrollY": "150px",
"bRetrieve": true,
"bProcessing": false,
"bServerSide": false,
"aoColumns": columns,
'bAutoWidth': false,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
},
});
for(var i=0; i<10; i++ {
myTable.fnAddData(['xxxx','yyyy']);
}
$("#hideDate").change(function() {
myTable.fnSettings().aoColumns[0].bVisible = false;
});
After calling hideDate change method I am getting this js error
TypeError: o.aoColumns[iVis] is undefined
nThs[i].style.width = o.aoColumns[iVis].sWidth;
Please give some idea to fix this problem.
I need to change datatable columns visibility dynamically.
Regards,
Prasath M
There is a datatables plugin that has been created for this, ColVis. If you don't want to use the plugin, you could look at the source code and see how they did it.
Related
I am using jquery datatables(1.10.9) with server side processing.
tab = $('#'+div).dataTable( {
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
"sPaginationType": "full_numbers",
"sScrollY": "550px",
"sScrollX": "100%",
"bFilter": true,
"aoColumnDefs": [{ "bSearchable": false, "aTargets": [ 2 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 12 ] },{ "bSortable": false, "bSearchable": false, "aTargets": [ 13 ] }],
"oTableTools": {},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'data/getdata',
"fnServerParams": function ( aoData ) {
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ){
// Processing data like:
// $('td:eq(2)', nRow ).html( 'Test' );
}
});
// Hiding 5th column
tab.fnSetColumnVis( 5, false); //Does not work.Removes the column header but not the row data.
How do I get hide column to work properly with server side processing in jquery datatables?
I got this to work as follows:
fnDrawCallback: function() {
$('td:nth-child(3),th:nth-child(3)').hide();
}]
tab.fnSetColumnVis( 3, false) will not work because it re-fetches the data.Hence, had to do it using simple old jquery.
fnSetColumnVis() function has 3rd property (true or false) that not rebind the data. so try with fnSetColumnVis(3,false,flase) may be it can help.
You do it when you set up the datatable, using "ColumnDefs" thusly, where targets is the number of the column you want to hide:
tab = $('#'+div).dataTable( {
"columnDefs": [{ targets: 5, visible: false }],
"sDom": 'T<"clear">frltip',
"aaSorting": [],
"bAutoWidth" : false,
...
If you have 2 hidden columns, it will look like this:
"columnDefs": [{ targets: 5, visible: false }, { targets: 6, visible: false }],
Note: column numbering starts at 0.
I've created a dataTable. I'm receiving about 13 data from the database. I've also declared a global variable and assigning it's value inside the dataTable in mRender event. But, the problem is I cannot bring it out of that. This is how I've tried:
var total_amount = 0;
function year_month(year_month) {
jQuery("#table").dataTable({
"sAjaxSource": "request-db.php?mode=dataTable&year_month=" + jQuery("#year_month").val(),
"bDestroy": true,
"bPaginate": false,
"bInfo": false,
"bFilter": false,
"bSort": false,
"aoColumnDefs": [
{
"aTargets": [0],
"mRender": function(data, type, row) {
total_amount = row[14];
alert(total_amount);
return '' + row[0] + '';
}
}
]
});
}
alert("total"+total_amount);
});
In the first alert, I'm getting the correct value, but in the second alert I get 0(to which I've initialized). How can I get that outside the dataTable? What should I do?
I am using jQuery DataTables with Grouping and Filtering on data. But both can't work together. Only one can work.
oTable = $('#schedule').dataTable({
'bLengthChange': false,
'bPaginate': false,
'bJQueryUI': true,
'processing': true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["no-sort"] }
]
}).columnFilter({
sPlaceHolder:"head:before"
}).rowGrouping({
sGroupingColumnSortDirection: "desc",
bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1,
asExpandedGroups: ['Pending Action', 'In Operation']
});
Please give me advice on how to work with both and I want to add the filter field in different div.
It doesnt work because you are using chaining. You are accidently trying to initialise rowGrouping on whatever columnFilter() returns :
dataTable().columnFilter().rowGrouping()
< dataTable < columnFilter
Use another approach to initialise the plugins, for example in the initComplete callback (fnInitComplete if you are using 1.9.x) :
var table = $('#example').dataTable({
initComplete : function() {
this.columnFilter();
this.rowGrouping({
bExpandableGrouping: true,
asExpandedGroups: ["Other Browsers", "Trident"],
fnOnGrouped: function() { alert('Rows are regrouped!'); }
});
}
})
demo -> http://jsfiddle.net/y2s2b0an/
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
I'm trying to create a row inside my datatable that increments +1 each row. I've been told the easiest way to do this would be using fnRender. Now I've used fnRender to change data that's already in a column from the serverside processor, but never to create a new column alone.
Any help would be awesome!
Here's my current code:
oTable = $('#testingz').dataTable({
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [ [1,'desc'] ],
"sDom": '<""l>rt<"F"fp>',
"sAjaxSource": "server_processing.php",
"aoColumnDefs": [
{
"fnRender": function ( o, val ) {
return '' + o.aData[0] + '';
},
"aTargets": [ 0 ]
}
]
});
Do you mean something like this: http://datatables.net/release-datatables/examples/api/counter_column.html