I'm building a page where I need to display a datatable.
Based on a condition, this table should display either 5 or 6 columns.
This is my code in .js file to display the table with 6 columns:
if(Display)
{
myself.set_DataTable(myself._findjcontrol("tTable1"));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" }, //Column5
{"sType": "html"} //Column6
],
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
}
else
{
myself.set_DataTable(myself._findjcontrol("tTable_2"));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" } //Column5
],
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
}
Based on a condition, I'm repeating the code twice. Is there a way to defined some kind of property for the column, so, based on condition, I change that property and append it to a column definition. Something like this:
var isDisplay = false;
if(Display)
{
isDisplay = true;
}
else
{
isDisplay = false;
}
/* the rest of code */
{"sType": "string", isDisplay } //Column5
/* the rest of code */
Is that possible to do something like that?
If I correctly understood what you need, you can separate your settings with variables without repeating code:
var control = "tTable_2"
, columns = [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" } //Column5
];
if(Display)
{
columns.push({"sType": "html"}); //Column6
control = "tTable_1";
}
myself.set_DataTable(myself._findjcontrol(control));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": columns,
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
Also, it seems there's a feature in DataTable that could help you. Try to use the property bVisible in the column you want to hide/show:
myself.set_DataTable(myself._findjcontrol("tTable1"));
myself.get_DataTable().dataTable(
{
"sDom": '<"top">rt<"bottom"flp><"clear">',
"aoColumns": [
{ "sType": "string" }, //Column1
{"sType": "string" }, //Column2
{"sType": "string" }, //Column3
{"sType": "string" }, //Column4
{"sType": "string" }, //Column5
{"sType": "html", "bVisible": Display} //Column6
],
"bPaginate": false,
"bAutoWidth": false,
"bJQueryUI": false,
"bFilter": false,
"bPage": false,
"bSort": false,
"binfo": false,
"bSortClasses": false
});
Hope it helps.
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 trying to use row().show() plugin to jump to page where is tr with class .scrollAndHightlight in my DataTable with id #reqToApp.
Here is my DT initialization with initComplete function:
var table = $('#reqToApp').DataTable({
responsive: true,
stateSave: true,
fixedHeader: true,
autoWidth: false,
select: true,
order: [[1, "desc"]],
"iDisplayLength": 15,
language: {
"url": "/js/Czech.json"
},
"aoColumns": [
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "html"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": true, "bSearchable": true, "sType": "string"},
{"bVisible": true, "bSortable": false, "bSearchable": false, "sType": "html"}
],
"initComplete": function(settings, json){
var row = table.row($(".scrollAndHighlight")).node();
table.row(row).draw().show().draw(false);
}
});
But it does nothing, no errors in console.
What am I doing wrong?
JSFiddle: https://jsfiddle.net/ebRXw/2427/
You should not use $() jQuery method because it has access to elements that exists in DOM only. With jQuery DataTables pages other than current don't exist in DOM, therefore row on pages other than first couldn't be found.
You can supply CSS selector to row() method instead.
For example:
"initComplete": function(settings, json){
var api = new $.fn.dataTable.Api(settings);
var row = api.row(".scrollAndHighlight").node();
api.row(row).draw().show().draw(false);
}
See updated jsFiddle for code and demonstration.
I'm using the datatables plugin and it's working fine for me. However, I'm making multiple calls to populate multiple tables, when I know I could make one AJAX call and store the results in a variable and have each table function use that variable for its data, but I can't get it to work.
I'm using something like to to get the data I need.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
}
})
The idea is to pass all_data variable into my table function (I have several on this one page) without having to make multiple calls. Doing the following returns one column with the letter "a", which isn't right. The data that comes back is JSON coded. I've used the below code, but with the AJAX function as part of the table function:
$("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
What am I doing wrong here? I'm suspecting I have to prepare all_data somehow, but I'm not sure what that might be.
EDIT: If I console.log the data returned, this is what I get (cut off for brevity):
Object {draw: 0, recordsTotal: 484, recordsFiltered: 484, data: Array[484]}
data: Array[484]
[0 … 99]
0: Array[5]
0: "edu"1: "High School"2: "37.90"3: "49.70"4: "76"length: 5
Your code looks fine, the only thing you need to do is
Assign your datatable to a variable and then in your ajax resolve clear, add data and draw the table.
var all_data;
$.ajax({
async : false,
url: 'all_data.php',
type: 'GET',
success: function(data) {
all_data = data;
console.log(all_data);
table.clear().row.add(all_data).draw(); //clear, add data and draw
}
});
// Assign your datatable to a variable
var table = $("#my_table").DataTable({
"data":all_data
,
"paging": true,
"sDom": '<"top">t<"bottom"><"clear">',
"pageLength": 50,
"order": [[ 4, "desc" ]],
"aoColumns": [
{ "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },
{ "bSortable": true, "searchable": false, "width": "10%", "sClass": "lang_body_2 table_names", "sTitle": "" },
{ "bSortable": true, "searchable": false,"width": "20%", "sClass": "lang_body_2", "sTitle": "Database","visible":false},
{ "bSortable": true, "searchable": false ,"width": "20%","sClass": "lang_body_2","sTitle": "National Average","visible":false },
{ "bSortable": true, "searchable": false ,"width": "50%","sClass": "lang_body_2 index_num table_index","sTitle": "" },
],
"columns": [
{ "searchable": true },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
{ "searchable": false },
],
"search": {
"search": "gen"
},
"columns": [
{ "width": "20%" },
null,
null,
null,
{ "width": "80%" },
],
"initComplete": function(settings, json) {
colorIndex();}
});
});
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.