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.
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'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.
I am trying to use jquery table by initializing the table like
$("#someTable").DataTable();
This is giving me the object reference which contains member methods like column, columns and others. Here someTable is a normal static table with columns specified in thead and few static rows.
I am trying to intialize other table which uses server side pagination and the columns are not specified in tag but in datatable aoColumns. like
listDataTable= $("#ListDataPane_data").DataTable({
"iDisplayLength":100,
"bFilter": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": PaginationUrl,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"bDestroy": true,
"bStateSave": true,
"sScrollY":"300",
"aaSorting":orderSort,
"aoColumns": aoColumns,
"bScrollInfinite": true,
"sScrollY": "300px",
"sScrollX": "963px",
"bAutoWidth": false,
},
});
var aoColumns = [
{ "sTitle": "Action","sWidth":"30px","sName": "Action","sClass":"column_action","bSortable":false},
{ "sTitle": "","sWidth":"30px", "bSortable":false },
{ "sTitle": " ","sWidth":"20px" , "bSortable":false},
{ "sTitle": "Mode","sWidth":"100px" ,"sName": "orderType","bSearchable": true,"sClass":"column_pm","bSortable":true},
{ "sTitle": "Provider","sWidth":"80px" ,"sName": "providerName","sClass":"column_action"},
{ "sTitle": "Id","sWidth":"80px","sName":"id","bSortable":true,"sClass":"column_orderid"},
{ "sTitle": "Status" ,"sWidth":"100px","sName": "Status","sClass":"column_action"},
{ "sTitle": "Validated By", "bSearchable": true, "bVisible": false ,"sWidth":"100px","sName": "validatedBy" , "bSortable":true,"sClass":"column_validated"},
];
This is giving response which doesnt contain column and columns properties. I need to access these properties. Someone has any solution?
CAUSE
There are some issues with your code:
unnecessary closing bracket }
aoColumns variable should be defined before you use it during DataTables initialization.
trailing commas
SOLUTION
The correct code is shown below
var aoColumns = [
{ "sTitle": "Action","sWidth":"30px","sName": "Action","sClass":"column_action","bSortable":false},
{ "sTitle": "","sWidth":"30px", "bSortable":false },
{ "sTitle": " ","sWidth":"20px" , "bSortable":false},
{ "sTitle": "Mode","sWidth":"100px" ,"sName": "orderType","bSearchable": true,"sClass":"column_pm","bSortable":true},
{ "sTitle": "Provider","sWidth":"80px" ,"sName": "providerName","sClass":"column_action"},
{ "sTitle": "Id","sWidth":"80px","sName":"id","bSortable":true,"sClass":"column_orderid"},
{ "sTitle": "Status" ,"sWidth":"100px","sName": "Status","sClass":"column_action"},
{ "sTitle": "Validated By", "bSearchable": true, "bVisible": false ,"sWidth":"100px","sName": "validatedBy" , "bSortable":true,"sClass":"column_validated"}
];
var listDataTable = $("#ListDataPane_data").DataTable({
"iDisplayLength": 100,
"bFilter": true,
"bServerSide": true,
"sServerMethod": "POST",
"sAjaxSource": PaginationUrl,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"bDestroy": true,
"bStateSave": true,
"sScrollY": "300",
"aaSorting": orderSort,
"aoColumns": aoColumns,
"bScrollInfinite": true,
"sScrollY": "300px",
"sScrollX": "963px",
"bAutoWidth": false
});
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 create dataGrid using jQuery DataTable. However, I found problem to update cell when value of mData is null like code below:
var oTable = $("table#table_lookup").dataTable({
"bLengthChange": false,
"bFilter": false,
"sPaginationType": "full_numbers",
"aaData": data,
"aoColumnDefs": [{
"sTitle": "No.",
"mData": null,
"aTargets": [0],
"bSortable": false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text((iRow + 1));
}],
"bAutoWidth": false,
"aaSorting": [[ 1, 'asc' ]]
});
Can anyone help me to solve this problem?
when mData is null, you need to specify sDefaultContent option which can be set a empty string "", like:
var oTable = $("table#table_lookup").dataTable({
"bLengthChange": false,
"bFilter": false,
"sPaginationType": "full_numbers",
"aaData": data,
"aoColumnDefs": [{
"sTitle": "No.",
"mData": null,
"sDefaultContent": "", //add this
"aTargets": [0],
"bSortable": false,
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$(nTd).text((iRow + 1));
}],
"bAutoWidth": false,
"aaSorting": [[ 1, 'asc' ]]
});