$('#datatable').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "../../WebPost/AjaxPinToFolderSearch",
"data": function (d) {
d.postID = globalPinToFolderSearchID;
},
"columns": [
{ "data": "Folder", "defaultContent": "Value Not Received" },
{ "data": "Pinned", "defaultContent": "Value Not Received" },
{ "data": "StartDate", "defaultContent": "Value Not Received" },
{ "data": "EndDate", "defaultContent": "Value Not Received" }
]
}
});
With example response (taken from developer tools Network Response):
{"data":[{"Folder":"Home/Test One/Frogger","Pinned":false,"StartDate":"\/Date(18000000)\/","EndDate":"\/Date(18000000)\/"}]}
Here is an example showing the error message: http://lektrikpuke-001-site1.ctempurl.com/
Datatables appears to be working correctly in that it is requesting and receiving data. The error pops up, the table displays empty rows (responsive - 1 row of data = 1 row in table, 10 rows of data = 10 blank rows in table). I realize this is a common question, but I cannot figure out what is wrong. As a note, backend is C#.
Minor issue: The columns option shouldn't be a part of the ajax options. Move it out and it'll work without any errors as the DataTable now will receive the correct columns (which in your case was null). I tested it in the console and it worked. Let me know if that doesn't work for you.
Related
I have a situation where I want to get the full (data) from the backend as a CSV file. I have already prepared the backend for that, but normally the front-end state => (filters) is not in contact with the backend unless I send a request, so I managed to solve the problem by mimicking the process of showing all data but by a custom button and a GET request ( not an ajax request ). knowing that I am using serverSide: true in datatables.
I prepared the backend to receive a request like ( Show All ) but I want that link to be sent by custom button ( Export All ) not by the show process itself as by the picture down because showing all data is not practical at all.
This is the code for the custom button
{
text: "Export All",
action: function (e, dt, node, config) {
// get the backend file here
},
},
So, How could I send a request like the same request sent by ( Show All ) by a custom button, I prepared the server to respond by the CSV file. but I need a way to get the same link to send a get request ( not by ajax ) by the same link that Show All sends?
If you are using serverSide: true that should mean you have too much data to use the default (serverSide: false) - because the browser/DataTables cannot handle the volume. For this reason I would say you should also not try to use the browser to generate a full export - it's going to be too much data (otherwise, why did you choose to use serverSide: true?).
Instead, use a server-side export utility - not DataTables.
But if you still want to pursuse this approach, you can build a custom button which downloads the entire data set to the DataTables (in your browser) and then exports that complete data to Excel.
Full Disclosure:
The following approach is inspired by the following DataTables forum post:
Customizing the data from export buttons
The following approach requires you to have a separate REST endpoint which delivers the entire data set as a JSON response (by contrast, the standard response should only be one page of data for the actual table data display and pagination.)
How you set up this endpoint is up to you (in Laravel, in your case).
Step 1: Create a custom button:
I tested with Excel, but you can do CSV, if you prefer.
buttons: [
{
extend: 'excelHtml5', // or 'csvHtml5'
text: 'All Data to Excel', // or CSV if you prefer
exportOptions: {
customizeData: function (d) {
var exportBody = getDataToExport();
d.body.length = 0;
d.body.push.apply(d.body, exportBody);
}
}
}
],
Step 2: The export function, used by the above button:
function GetDataToExport() {
var jsonResult = $.ajax({
url: '[your_GET_EVERYTHING_url_goes_here]',
success: function (result) {},
async: false
});
var exportBody = jsonResult.responseJSON.data;
return exportBody.map(function (el) {
return Object.keys(el).map(function (key) {
return el[key]
});
});
}
In the above code, my assumption is that the JSON response has the standard DataTables object structure - so, something like:
{
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "San Francisco",
"extn": "1562"
}
]
}
So, it's an object, containing a data array.
The DataTables customizeData function is what controls writing this complete JSON to the Excel file.
Overall, your DataTables code will look something like this:
$(document).ready(function() {
$('#example').DataTable( {
serverSide: true,
dom: 'Brftip',
buttons: [
{
extend: 'excelHtml5',
text: 'All Data to Excel',
exportOptions: {
customizeData: function (d) {
var exportBody = GetDataToExport();
d.body.length = 0;
d.body.push.apply(d.body, exportBody);
}
}
}
],
ajax: {
url: "[your_SINGLE_PAGE_url_goes_here]"
},
"columns": [
{ "title": "ID", "data": "id" },
{ "title": "Name", "data": "name" },
{ "title": "Position", "data": "position" },
{ "title": "Salary", "data": "salary" },
{ "title": "Start Date", "data": "start_date" },
{ "title": "Office", "data": "office" },
{ "title": "Extn.", "data": "extn" }
]
} );
} );
function GetDataToExport() {
var jsonResult = $.ajax({
url: '[your_GET_EVERYTHING_url_goes_here]',
success: function (result) {},
async: false
});
var exportBody = jsonResult.responseJSON.data;
return exportBody.map(function (el) {
return Object.keys(el).map(function (key) {
return el[key]
});
});
}
Just to repeat my initial warning: This is probably a bad idea, if you really needed to use serverSide: true because of the volume of data you have.
Use a server-side export tool instead - I'm sure Laravel/PHP has good support for generating Excel files.
I am trying to run a query with the rest api but I can´t get it to work, I am sending this body in json:
"structuredQuery": {
"where": {
"fieldFilter": {
"field": {
"fieldPath": "total"
},
"op": "EQUAL",
"value": {
"integerValue": "10",
}
}
},
"from": [{
"collectionId": "Total"
}]
}
I am just testing if querys work, I have a collection called Total with documents, and these documents have a field called total that is an integer value. I am using a POST request with the following URL:
"https://firestore.googleapis.com/v1/projects/MY_PROJECT_NAME/databases/(default)/documents:runQuery"
and I am getting this error:
[{
"error": {
"code": 400,
"message": "only structured queries are supported",
"status": "INVALID_ARGUMENT"
}
}]
The CollectionSelector in your structured query is missing the allDescendants field.
If you check this documentation you can see that this field is a flag which can either be true or false but not null, so you have to set this in the query otherwise it will not work.
Also you need to add the select clause to add all fields you want to get as a result of the query or keep it empty to return all fields.
Finally in the said documentation you can check that there is a proper order that should be respected, in which the from must be declared before where. So if you change your structured query to the following:
"structuredQuery": {
"from": [{
"collectionId": "Total"
"allDescendants": false
}],
"select": { "fields": [] },
"where": {
"fieldFilter": {
"field": {
"fieldPath": "total"
},
"op": "EQUAL",
"value": {
"integerValue": "10",
}
}
}
}
It will work as expected.
In My website I am using data tables for display data. Now The issue is If there are 10 records than the default pagination is not display but when there are more than 10 records the pagination of data table should display.
This is how I initialize datatable
$(document).ready(function(){
$('#tbl_member').dataTable({
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
});
This datatable code is when I done server side processing:-
var save_method;
var table;
$(document).ready(function() {
table = $('#table').DataTable({
oLanguage: {
sProcessing: "<img src='<?php echo base_url();?>assets/img/loader.gif'>"
},
"processing": true,
"serverSide": true,
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo base_url();?>Technology/technology_list",
"type": "POST"
},
"columnDefs": [
{
"targets": [ -1 ],
"orderable": false,
},
],
});
});
Use bPaginate (old hungarian notation style) or paginate to turn pagination on or off. You can use expressions to determine the options :
$('#tbl_member').dataTable({
"bPaginate" : $('#tbl_member tbody tr').length>10,
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
This works in both 1.9.x and 1.10.x versions of dataTables. Demo showing two tables with the one having less than 10 records, the other a lot more -> http://jsfiddle.net/t2xcfLap/3/
Hide pagination controls after an AJAX update. Assuming the JSON reponse is on the form
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
[...],
]
}
then
table.on('xhr', function(e, settings, json, xhr) {
if (json.recordsTotal<10) {
$("#example_paginate").hide();
$("#example_length").hide();
} else {
$("#example_paginate").show();
$("#example_length").show();
}
})
demo -> http://jsfiddle.net/yyo5231z/
The injected controls is named on the form <tableId>_length, <tableId>_paginate. So if your table have the id table, then the above should be $("#table_paginate").hide(); and so on.
The reason for the different approach compared to the first answer with a static table is, that you cannot change pagination on the fly without re-initialising the table.
I recently ran into a problem when implementing the ajax functionality of jquery DataTables. Until I actually gave my json object collection an explicit name I couldn't get anything to display. Shouldn't there be a default data source if nothing named is returned?
Client Side control setup (includes hidden field that supplies data to dynamic anchor:
$('#accountRequestStatus').dataTable(
{
"destroy": true, // within a method that will be called multiple times with new/different data
"processing": true,
"ajax":
{
"type": "GET",
"url": "#Url.Action("SomeServerMethod", "SomeController")",
"data": { methodParam1: 12341, methodParam2: 123423, requestType: 4123421 }
}
, "paging": false
, "columns": [
{ "data": "DataElement1" },
{ "data": "DataElement2", "title": "Col1" },
{ "data": "DataElement3", "title": "Col2" },
{ "data": "DataElement4", "title": "Col3" },
{ "data": "DataElement5", "title": "Col4" },
]
, "columnDefs": [
{
"targets": 0, // hiding first column, userId
"visible": false,
"searchable": false,
"sortable": false
},
{
"targets": 5, // creates action link using the hidden data for that row in column [userId]
"render": function (data, type, row) {
return "<a href='#Url.Action("ServerMethod", "Controller")?someParam=" + row["DataElement1"] + "'>Details</a>"
},
"searchable": false,
"sortable": false
}
]
});
Here's a snippet of my server side code that returns the json collection.
tableRows is a collection of models containing the data to be displayed.
var json = this.Json(new { data = tableRows });
json.JsonRequestBehavior = JsonRequestBehavior.AllowGet;
return json;
As I said before, the ajax call returned data but wouldn't display until I gave the collection a name. Maybe I missed this required step in the documentation, but wouldn't it make sense for the control to wire up to a single returned collection as the default data source and not require the name? Figuring out the name thing equated to about 2+ hours of messin' around trying different things. That's all I'm saying.
Maybe this'll help someone else too...
dataTables does actually have a dataSrc property! dataTables will look for either a data or an aaData section in the JSON. Thats why you finally got it to work with new { data=tableRows }. That is, if dataSrc is not specified! If your JSON differs from that concept you must specify dataSrc :
If you return a not named array / collection [{...},{...}] :
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: ""
}
If you return a JSON array named different from data or aaData, like customers :
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: "customers"
}
If the content is nested like { a : { b : [{...},{...}] }}
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: "a.b"
}
If you have really complex JSON or need to manipulate the JSON in any way, like cherry picking from the content - dataSrc can also be a function :
ajax: {
url: "#Url.Action("SomeServerMethod", "SomeController")",
dataSrc: function(json) {
//do what ever you want
//return an array containing JSON / object literals
}
}
Hope the above clears things up!
It's been a few days since i am using jQuery Datatables and i encounter a problem testing my code on IE8, on IE9 it works fine.
Below is the snapshot of the error i am getting in IE8:
I go to the link mentioned in this message and i came to know that this error comes when datatables asking for a column value and is getting null or undefined value for that.
Here's the problem as you can see he is asking for 6th(0 based numbering) column value while i only declare 5 columns and i am sending their values as well.
Below is JQuery portion of datatables initialization:
if (data != null)
{
$('#tdUsersTable').html('');
/*DataTable Implementation*/
var table = $('#tblUsers').dataTable({
"bFilter": true,
"bInfo": false,
"bDestroy": true,
"bwidth": '100%',
"sDom": 't',
"sPaginationType": "full_numbers",
"order": [[0, "asc"]],
"aaData": data,
"aoColumns": [
{ "sTitle": "User ID" },
{ "sTitle": "User Name" },
{ "sTitle": "User Role" },
{ "sTitle": "Company" },
{ "sTitle": "Active" },
],
"oLanguage":
{
"oPaginate":
{
"sFirst": " ",
"sLast": " ",
"sNext": " ",
"sPrevious": " "
}
}
});
}
I transform my list of data to array and return to JS as JsonResult.
Here is a snapshot of that data:
And below is the screen shot of data received in JS:
Your suggestion are warmly welcome!
Surprisingly answer was very simple, when i came to know it i was shocked.
Above code raises error due to the trailing comma, yes that was the problem.
IE 9 is fairly intelligent, when it sees that there are no title after last comma it ignores it but when it came to IE 8 it interprets that if there is a comma at the end, there should have to be a column, and if it did't i will try to make one by itself :)
In order to avoid this error you just have to remove the trailing comma, that is after Active as displayed below:
"aoColumns": [
{ "sTitle": "User ID" },
{ "sTitle": "User Name" },
{ "sTitle": "User Role" },
{ "sTitle": "Company" },
{ "sTitle": "Active" }
],