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
Related
I am trying to add data dynamically in datatable.I have initialized table on document.ready and created an instance of it.After that, I am trying to add data in the table using instance.
$(document).ready(function() {
//Initialize tooltips
table_sgdFile_list_linked = $('#sgdFile_list_linked').DataTable({
bSort: false,
destroy:true,
bLengthChange: false,
pageLength: 4,
columns: [{
title: "Name"
},
{
title: "Action"
}
]
});
});
I am trying to bind the data
table_sgdFile_list_linked.data(dataSet)
but it is not working.
my_list = $('#my-table-html-id').DataTable( {
"processing": true,
"serverSide": false,
"paging": true,
"bLengthChange" : true,
"bFilter": false,
"pageLength": 10,
"info": false,
"ordering": true,
"ajax": "PATH-OF-MY-API",
"columnDefs": [
{
"render": function ( data, type, row ) {
var html = data + " Modified!";
return html;
},
"orderable": false,
"targets": 1 //Last column
},
],
})
you can try this:
to add 1 row: table_sgdFile_list_linked.row.add(rowJson).draw();
to add multiple rows: table_sgdFile_list_linked.rows.add(rowsJson).draw();
following worked for me :
table_sgdFile_list_linked.clear().draw();
$('#sgdFile_list_linked').dataTable().fnAddData(trHTML);
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 am using JQuery Datatables Plugin (datatable). I want to disable reordering of columns,
Below is my code.
.DataTable({
"serverSide" : true,
"bFilter": false,
"bInfo": false,
responsive: true,
sDom: "Rlfrtip",
"pagingType" : "simple_numbers",
"pageLength" : 10,
"bLengthChange" : false,
"drawCallback":enableTimer(trainingTableRefreshFrequency),
"ajax" : {
"url" : getAllTraniningServiceUrl,
"data" : function(d) {
d.searchKey=$("#searchKey").val();
d.searchValue=$("#searchValue").val();
},
type : 'POST'
},
"language": {
"emptyTable": "No Data Available"
},
"columns" : [ {
"orderable" : false,
"searchable" : false,
"data" : null,
]
});
What are the ways to disable reordering of columns.
Im wondering if it is possible to minimize my code by having a common JS file, As there will be many datatables around my application..
All the Datatables will have same theme only difference will be of data.
Like this script i have
var oTable = $('#ManageForms').dataTable({
"aoColumns": [
/* ID */ {
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
/* Form Name */ null,
/* Form Path */ null,
/* Form CI Path */ null,
/* Actions */ null
],
"bServerSide":true,
"bProcessing":true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
//"bFilter":true,
//"sServerMethod": "POST",
"sAjaxSource": "{{base_url()}}admin/configurations/listForms_DT/",
"iDisplayLength": 25,
"aLengthMenu": [[2, 25, 50, -1], [2, 25, 50, "All"]],
/*"sEcho": 1,
"columns":[
{data:"FormName"},
{data:"FormPath"},
{data:"FormCIPath"},
{ "data": null,
"defaultContent": "<a href='#editBtnModal' class='editBtnFunc' ><i style='color: #666666' class='fa fa-pencil fa-fw fa-2x'></i></a><a href='#' id='deleteBtn'><i style='color: #ff0000' class='fa fa-times fa-fw fa-2x'></i></a>",
"targets": -1
}
],*/
'fnServerData' : function(sSource, aoData, fnCallback){
$.ajax ({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
}); //end of ajax
},
'fnRowCallback': function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).attr("data-id",aData[0]);
return nRow;
}
});
i guess everything will be same except the sAjaxSource": "{{base_url()}}admin/configurations/listForms_DT/",
and
"aoColumns": [
/* ID */ {
"bVisible": false,
"bSortable": false,
"bSearchable": false
},
/* Form Name */ null,
/* Form Path */ null,
/* Form CI Path */ null,
/* Actions */ null
],
so instead of copy pasting the code again and again on every page of datatables. is there any way i put this code in single common.js file and send the parameters for specific datatable.
You should put your code in a function which could be call in each specific case with the url needed as param:
function getData(url){
// ...
"sAjaxSource": url
// ...
}
this function can be in a common js and then use in any other code that is after you import this file.
The array in aoColumns can also be passed as param as the other field.
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.