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.
Related
I am new in MVC application, I have handled the large data in Jquery datatable Server side script working fine when all data loaded(ex: Select the all Records in particular table).
If I make manual filter (ex: Select * from xxx where zzz=yyy) then I am not able to send parameters to controller action.
Please find the below script.
$(document).ready(function () {
debugger
var oTable = $('#PartUpdate').dataTable({
"bServerSide": true,
"sAjaxSource": "Test/AjaxHandler",
data: $.param({ 'b':'Mani'}),
"bProcessing": true,
buttons: [
'csv', 'excel', 'print'
],
"aoColumns": [
{
"sName": "ID",
"bSearchable": false,
"bSortable": false,
"fnRender": function (oObj) {
return 'View';
}
},
{ "sName": "UserName" },
{ "sName": "FullName" },
{ "sName": "EmailId" }
]
});
});
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 want to create a datatable wherein my first column values come from an array and second and other columns contains custom html ( select boxes, inputs etc).I have used datatable before but that time i was reading data from json ( for all columns ) like this:
function basketTable(data){
topTable = $('#at-top-100').dataTable({
//layout of data table
"dom": 'Tlfrtip',
"bInfo" : false,
"bDestroy":true,
"bFilter" : false,
"responsive":true,
"aaData" : data,
"aoColumns": [
{ "mData": "Ap" },
{ "mData": "Dp" },
{ "mData": "A"},
{ "mData": "S"},
{ "mData": "S"},
],
"iDisplayLength": 10,
"oLanguage": {
"sSearch": "",
"sSearchPlaceholder" : "Search..",
"sLengthMenu": " _MENU_ ",
}
});
}
Any insight on how i can achieve this. Any help would be greatly appreciated!!
Use the "mrender" function and place any html you want to render per cell in the function.
You can also access the properties of the object in the row if you want to use them in your display.
http://legacy.datatables.net/usage/columns
function basketTable(data){
topTable = $('#at-top-100').dataTable({
//layout of data table
"dom": 'Tlfrtip',
"bInfo" : false,
"bDestroy":true,
"bFilter" : false,
"responsive":true,
"aaData" : data,
"aoColumns": [
{ "mData": "Ap" },
{ "mData": "Dp" },
{ "mData": "A"},
{ "mData": "S"},
{ "mData": "S",
"mRender": function(data,type,full)
{
return '<input type="text" value="Scanners and Scales"/>'
}
],
"iDisplayLength": 10,
"oLanguage": {
"sSearch": "",
"sSearchPlaceholder" : "Search..",
"sLengthMenu": " _MENU_ ",
}
});
}
recently my boss asked me to implement the fixed header plug-in for datatables plug-in in salesforce.
The way my code is designed is that every time search button is clicked i have a callback function to the db as well as an oncomplete function re-initializing the data tables.
Looking at the sample code for fixed headers i put the call to the function new FixedHeader(oTable); inside the initialization block. Instead of getting re-initialized every time, the header is getting created again and again. So with each call i have a new floating header plus the old one in some misplaced corner as well, how do i change this?
function Kudos()
{
oTable = $('.datatable').dataTable({
"iDisplayLength": 100,
"sDom": '<C><"H"T><"clear"><"H">t<"F"ip>',
"bRetrieve": true,
"aoColumnDefs": [ {
"aTargets": [3,4,5,6,7,8,9,10],
"fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
if ( sData < "0" ) {
$(nTd).css('color', 'red')
$(nTd).css('font-weight', 'bold')
}
}
} ],
"oTableTools":
{
"sSwfPath": "{!$Resource.SWF_File}",
"aButtons": [
{
"sExtends": "csv",
"sFileName": "PortFolio.csv",
"sButtonText":"Export"
}, "print" ]
},
"oColVis":
{
"activate": "mouseover"
},
"bAutoWidth": false,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aaSorting": [[ 2, "asc" ]] ,
"bLengthChange": false,
"bFilter": true,
"aoColumns": [
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"},
{ "sWidth": "6%" },
{"sWidth": "6%"},
{"sWidth": "6%"}
]
});
new FixedHeader( oTable );
}
k, it seems this in a known bug. the unavailability of something like a destroy function for fixed headers is looking to be included in the next release of FixedHeader plug-in for datatables. basically there is no fix atm
As i am working on Salesforce, it is very easy to re-render parts of the VF page, without reloading the entire page, so i ended up rebuilding the DataTable upon each render. That fixed the issue.
I don't know if it's a bug, but I have a datatable+ajax with the following options:
"bServerSide": true,
"sAjaxSource": url,
"fnServerData": function (sSource, aoData, fnCallback) {
jQuery.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
},
"sPaginationType": "bootstrap",
"aoColumns": [
{ "sName": "Id", "sType": 'numeric', "bVisible": false },
{ "sName": "PostingDate", "sType": 'Date' },
{ "sName": "Userid", "sType": 'string', "bVisible": false },
{ "sName": "DisplayName" },
{ "sName": "Description" },
{ "sName": "MainTag" },
{ "sName": "Tags" },
{ "sName": "HowMuch" }
]
I have a form where users can add rows and when they submit it I add data to the database with an ajax call and then call:
jQuery('#mydatatable').dataTable().fnReloadAjax();
When a user click to sort the table by column "MainTag" my server-side ajax receives:
iSortCol_0 4
iSortingCols 1
And all bSortable_# are there, correctly from 0 to 7 (I have 8 columns as shown above.
Now my problem is iSortCol_0 is misleading, since the columns where hidden, if I don't have a mean to know which columns are hidden on the server I misinterpret iSortCol_0=4 sorting by the wrong column.
I can implement a workaround, sending the information of which columns are displayed or hidden externally to datatables but I have the feeling either I am doing something wrong or I have missed to find the answer to my problem in the documentation.
I don't think that there is an automatic way to know that, what i'd do is send an extra parameter to the server using fnServerParams() (as detailed in this example) to inform the server about what columns are hidden
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data", "value": "my_value" } );
}