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
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.
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
});
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 begin learn about Sencha Touch 2. So, I have had many problems to ask! ^^ Let's research it.
Now I have a data json like:
{
result: "SUCCESS",
national: [
"Afghanistan",
"Albania",
"Albania",
"Algeria",
"American Samoa",
"Andorra"
]
}
Then, I will load it from url: nation.php file.
How can i load it to My Select Field.??????
Share and Support to me.! Thanks :).
I don't know how to do this in Sencha Architect 2 ( i am not using it).. but still
Instead of asking question without try (I mean you didn't post tried code here), Better you start with Sencha Touch Documentation.
Anyway, you can do it as follows
Model
Ext.define('AppName.model.countries', {
extend : 'Ext.data.Model',
config: {
fields: [
{name: 'name', convert: function(value, record) {
return record.raw;
}}
],
}
});
Store
var myStore = Ext.create("Ext.data.ArrayStore", {
model : 'AppName.model.countries',
proxy: {
type: "ajax",
url : "nation.php",
reader: {
type: 'json',
rootProperty : function(data) {
return data.national;
}
}
},
autoLoad: true
});
Select Field in View
Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [{
xtype: 'selectfield',
store: myStore ,
valueField:'name',
displayField:'name'
}]
});
With Viswa's Support. :) I found this problem - XMLHttpRequest cannot load. Origin is not allowed by Access-Control-Allow-Origin error (browser policy security).
And Sencha Touch document say: " The JsonP proxy is useful when you need to load data from a domain other than the one your application is running on. If your application is running on http://domainA.com it cannot use Ajax to load its data from http://domainB.com because cross-domain ajax requests are prohibited by the browser.
" Also, All we need to do is - "Implement all api in Your Webserver" and Follow JsonP's format code: ( in PHP)
$callback = $_REQUEST['callback'];// check callbackkey
// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');// output data.
//start output
if ($callback) {
header('Content-Type: text/javascript');
echo $callback . '(' . json_encode($output) . ');';
} else {
header('Content-Type: application/x-json');
echo json_encode($output);
}
If. Using Sencha Touch 2.1, You can use:
Ext.data.JsonP.request({
url: 'http://otherdomain/svn_visaapi/trunk/api/visa_api.php/test_json',
callbackKey: 'callback',
success: function(result) {
console.log(result);
//Your success function here...
}
});
- If, Using Sencha Architect, you can use a Store.proxy.JsonP to call api.
- Read more document Sencha Touch 2.1 to see that.
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!