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();}
});
});
Related
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.
Trying to stop display of certain params into datatable.
Already used Info: false. However still the datatable shows Showing 0 to 0 of 0 entries.
Here is the JavaScript code:
$(document).ready(function() {
$('#cli').addClass('hide');
$('.users8').addClass('activetab');
var oTable = $("#bugtable").dataTable({
"bLengthChange": false,
"Info" : false,
"paging":false,
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [-1]
}],
"autoWidth": false,
"columns": [{
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}, {
"width": "10%"
}]
});
$('#addfor').keyup(function() {
oTable.search($(this).val()).draw();
});
});
Set the property sEmptyTable in oLanguage when setting your table to an empty string:
var oTable= $('#bugtable').dataTable({
"oLanguage": {
"sEmptyTable": ""
}
// Other table setup options
}
In the below code I am getting the return value using AJAX and now I want to filter the values. My return value looks like this:
"ProductID":1 ,
"ProductName": Salt
I want only the ProductName. Please help me to do this.
function LoadProducts() {
var LocationID = $('#<%= ddlLocations.ClientID %>').val();
var ProductTypeID = $('#<%= ddlProductTypes.ClientID %>').val();
$("#product").dataTable({
"oLanguage": {
"sZeroRecords": "No records to display",
"sSearch": "Search"
},
"aLengthMenu": [[10, 25, 50, 100, 150, 250, 500, -1], [10, 25, 50, 100, 150, 250, 500, "All"]],
"iDisplayLength": 10,
"bSortClasses": false,
"bStateSave": false,
"bPaginate": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": false,
"bDestroy": true,
"sAjaxSource": "ProductsNew.aspx/GetProducts",
"bJQueryUI": true,
"sPaginationType": "simple",
"bDeferRender": true,
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sSource,
"data": "{'vLocationID': '" + LocationID + "','vProductTypeID': '" + ProductTypeID + "'}",
"success":
function (msg) {
var json = jQuery.parseJSON(msg.d);
window.localStorage.setItem("Productlist", msg.d);
fnCallback(json);
$("#product").show();
}
});
},
"aoColumns": [
{ "mDataProp": "Location", "sWidth": "125px" },
{ "mDataProp": "ProductCode", "sWidth": "100px" },
{ "mDataProp": "ProductName", "sWidth": "125px" },
{ "mDataProp": "ProductTypeName", "sWidth": "125px" },
{ "mDataProp": "CurrentStock", "sWidth": "50px" },
{ "mDataProp": "UnitType", "sWidth": "50px" },
{ "mDataProp": "ProductID" },
{ "mDataProp": "LocationID" },
{
"mDataProp": "ProductID", "bSearchable": false, "bSortable": false, "sWidth": "40px",
"mRender": function (data, type, full) {
var str = '<button type="button" id="btnEdit" onclick="openMyModal(\'ProductDetails.aspx?ProductID=' + full.ProductID + '&LocID=' + full.LocationID + '\')">Edit</button>';
return str;
}
}
],
"columnDefs": [
{
"visible": false, "targets": 6
},
{
"visible": false, "targets": 7
},
{
"sClass": "relative-postition-and-break-word"
}
]
});
}
$(document).ready(function () {
var dt = $('#example').DataTable({
"processing": true,
"serverSide": true,
"ajax": "api.php?t=clients",
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
"columns": [{
"className": "details-control",
"data": null,
"defaultContent": " "
}, {
"data": "c_name"
}, {
"data": "c_number"
}, {
"data": "c_link"
}]
});
});
My code throw an error of SQL access violation when I included the following with
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [0] }
]
But if i remove it, everything works fine, basically I just want disable sorting for column 0
How do I achieve it.
Thanks!!
Change "aoColumnDefs" to "columnDefs"
"columnDefs": [{
'bSortable': false, 'aTargets': [0]
}]
make sure you include these script files:
http://code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js
I'm using IgnitedDatatables (CodeIgniter library) for DataTables. The table gets generated without problems but if I search/filter it can only filter one column at a time. If I set "bServerSide" to false it works but then I lose the server-side functionality.
In the examples, this one is working:
http://datatables.net/release-datatables/examples/ajax/custom_data_property.html
while this isn't (server-side):
http://datatables.net/release-datatables/examples/data_sources/server_side.html
Is this not possible to achieve when running server-side?
This is my JSON response (shortened and with replaced data):
{"sEcho":0,"iTotalRecords":45438,"iTotalDisplayRecords":45438,"aaData":[["abc","12345","example#example.com","","","2010-01-27 22:31:10","Edit<\/a> Delete<\/a>"],["abc2"," test123","test#test.com","","","2008-06-15 22:09:33","Edit<\/a> Delete<\/a>"]],"sColumns":"fname,lname,email,phone,cellphone,created,edit"}
JavaScript code:
$("#members").dataTable( {
"bProcessing": true,
"bServerSide": true,
'sAjaxSource': '<?php echo base_url();?>members/listener',
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": 'POST',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"bLengthChange": false,
"aaSorting": [[ 0, "asc" ]],
"iDisplayLength": 15,
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"aoColumnDefs": [
{ "sName": "fname", "aTargets": [ 0 ] },
{ "sName": "lname", "aTargets": [ 1 ] },
{ "sName": "email", "aTargets": [ 2 ] },
{ "sName": "phone", "sWidth": "80px", "aTargets": [ 3 ] },
{ "sName": "cellphone", "sWidth": "100px", "aTargets": [ 4 ] },
{ "sName": "created", "sWidth": "120px", "aTargets": [ 5 ] },
{ "bSortable": false, "sName": "edit", "sWidth": "115px", "aTargets": [ 6 ] }
]
});
Thank you!
Well, the problem if you filter server side is that you are filtering through an SQL query and this is what is written on the example you posted;
Filtering
NOTE this does not match the built-in DataTables filtering which does it
word by word on any field. It's possible to do here, but concerned about efficiency
on very large tables, and MySQL's regex functionality is very limited
Basically you could do what you want to do (a regular expression match an all columns) but it's going to kill the performance server side.
What i usually do is provide a filter for each column, i need to filter.