I am using Jquery Datatables to populate some data from the server. Below is the code I am using.
var table = $(function () {
var table=$('#dataTable').dataTable( {
"jQueryUI": true,
"dom": 'T<"clear">lfrtip',
"sPaginationType": "full_numbers",
"sAjaxSource": HOST_NAME+"/states/",
"sAjaxDataProp": "content",
"bFilter": true,
"oSearch": {"bRegex":true, "bSmart": false},
});
var tt = new $.fn.dataTable.TableTools( table );
});
But during the ajax call I see an extra parameter http://myserver.com/states?_=1410160127424. I do not want to send the __=1410160127424 parameter since I am using varnish to cache the data. How to override the default implementation to restrict the extra parameter in the url.
Thanks
jQuery dataTables are using jQuery AJAX. So simply change the default settings for AJAX sessions :
$.ajaxSetup({
cache: false
});
Related
Pagination should be showing Showing 1 to 11 of 11 entries instead it is showing Showing 1 to 1 of 1 entries. Here is my javascript:
$('.my-dashboard').DataTable({
processing: true,
serverSide: true,
"searching": false,
"lengthChange": false,
ajax: "{{route('dashboard.getWork')}}",
"language": {
"infoFiltered": ""
},
columns: [
{ data: 'title' },
{ data: 'category' }
]
});
This is what is returned
{"draw":1,"iTotalRecords":11,"iTotalDisplayRecords":1,"aaData":[{"title":"Title","category":"1 Youtube Video"}]}
How do i solve?
From the official documentation, see the "returned data" section of this page. That shows the field names which DataTables expects to receive.
There is backwards-compatibility with older legacy field names.
However, that backwards compatibility only works if you use the old version of the DataTables ajax call:
Older versions of DataTables (1.9-) used a different set of parameters to send and receive from the server. As such scripts which are written for DataTables 1.10+ will not be able to function with DataTables 1.9-. However, DataTables 1.10 does have a compatibility mode for scripts written for 1.9-. This compatibility mode is triggered by use of the old sAjaxSource parameter (rather than the new ajax parameter) or by setting $.fn.dataTable.ext.legacy.ajax = true;.
See here for that specific note.
Bottom line: If you can standardize on the new nomenclature, that should resolve this issue.
Having a HTTP rest like API that is rendering HAL responses (like spring-data-rest) i am searching for the best way to integrate an angular client that is using jquery datatables.
Is there any way to do this without lot of work?
I've been searching without success about this topic even when both datatables and spring-data-rest are very popular.
This is a 2 years old question, but here is how to do it:
$(document).ready(function() {
/* Init the files table */
var filesTable = $("#tags").DataTable({
"processing": true,
"ajax": {
"url": "/api/v2/tag/search/findCategoryTags",
"dataSrc": "_embedded.tags"
},
"columns": [
{ "data": "name" },
{ "data": "id" }
]
});
});
Use the dataSrc property for the Ajax. More info here.
One of the problems here is that you need to deal with the incompatibility of the pagination and sorting scheme on the spring-data-rest (HAL) and Datatables. Take a look at the function datatable2Rest (...) in this link:
https://github.com/gcase/spring-data-rest-datatable-example/blob/master/spring-data-rest-datatables.md
I'm using jquery datatables (datables.net) and I want to multiple columns filtering. My form is prepackaged and prepared. I do not want to use datables input filtering genereator.
any ideas?
you can use fnServerParams here the doc + example
another example :
$(document).ready(function() {
$('#example').dataTable( {
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "script/server_showapply.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "nameOfparam", "value": $('#idOfInputForm').val() } );
}
});
});
the server-side :
you should have or something like (depends on server) Request['nameOfparam'] that will have the value of input from your form
for each ajax request of datatable that sends to you, all internal params (sEcho, iTotalRecords... + your custom params here "nameofparam", you can see them in the log network with your browser (ex Chrome F12 > Network > your request > header request > param send)).
Is it help you?
I’, using Kendo ui autocomplete control un a Project. The autocomplete gets the data from a WCF service returning data in JSON format.
In the html page I put this code:
$("#txtAutocomplete").kendoAutoComplete({
filter: "contains",
minLength: 3,
dataSource: {
type: "json",
serverFiltering: true,
serverPaging: true,
pageSize: 20,
transport: {
read: "http://localhost:52054/MyService.svc/Autocomplete"
}
}
});
The WCF service can be called like:
http://localhost:52054/MyService.svc/Autocomplete/anyword
And it responds with an json file like this:
["abc1","abc2","abc3"]
But the autocomplete don’t Works, and I get multiple syntax errors in jquery.min.js
Any suggestion?
Thanks for your time!
i am working on Extjs4 file upload control. i have view with file upload control as-
Ext.define('Balaee.view.kp.dnycontent.Content',
{
extend:'Ext.form.Panel',
requires:[
'Balaee.view.kp.dnycontent.ContentView'
],
id:'ContentId',
alias:'widget.Content',
enctype : 'multipart/form-data',
title:'This day in a history',
items:[
{
xtype: 'fileuploadfield',
hideLabel: true,
emptyText: 'Select a file to upload...',
//inputType: 'file',
id: 'upfile',
width: 220
}],
buttons: [{
xtype : 'button',
fieldlabel:'upload',
action:'upload',
name:'upload',
text: 'Upload',
formBind:'true'
}]
});
And corresponding action in controller is-
getUpload : function() {
var file10 = Ext.getCmp('ContentId').getEl().down('input[type=file]').dom.files[0];
var reader = new FileReader();
reader.onload = function(oFREvent) {
fileobj=oFREvent.target.result;
console.log(oFREvent.target.result);
};
}
});
So above controller's function is retriving uploaded file and displaying it in encoded format inside reader's onload function. i.e. "console.log(oFREvent.target.result);" line is displaying uploaded file's data in encoded format in console. I need to send this file to server side. So i am passing above fileobj as parameter to store as-
var storeObj=this.getStore('kp.DnycontentStore');
storeObj.load({
params:{
data:fileobj
},
callback: function(records,operation,success){
console.log("send");
},
scope:this
})
But its showing fileobj as undefined outside reader.onload function. So how to send this file along with its contents to server side? Is there any other way to get uploaded file in controller and send it to server. Please can someone guide me.
I dont know how to handle fileuplaod on php side, but the return response from the server needs to be text/html encoded
See the docs on this:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-method-hasUpload
also example PHP fileupload script:
http://www.w3schools.com/php/php_file_upload.asp