问题
I've been trying to get my JSON data in jQuery DataTables component.
First I wrote a JavaScript and a view like the code shown below:
$.fn.dataTable.Editor({
ajax: "http://localhost/example22/index.php?r=site/display",
table: "#example",
fields: [{
label: "Name:",
name: "name"
}, {
label: "Designation:",
name: "designation"
}, {
label: "Address:",
name: "address"
}, {
label: "Salary:",
name: "salary"
}]
});
$('#example').DataTable({
lengthChange: false,
ajax: "http://localhost/example22/index.php?r=site/display",
columns: [{
allk: "name"
}, {
allk: "designation"
}, {
allk: "address"
}, {
allk: "salary"
}],
select: true
});
and a view like
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Address</th>
<th>Salary</th>
</tr>
</thead>
</table>
and the url that is provided contains the following JSON data respectively
{
"allk": [
{
"name": "raju",
"designation": "developer",
"address": "he is from viswasapuram",
"salary": "30000"
},
{
"name": "bob",
"designation": "designer",
"address": "no idea",
"salary": "100000"
},
{
"name": "bob",
"designation": "designer",
"address": "no idea",
"salary": "100000"
},
{
"name": "suresh",
"designation": "designer",
"address": "fffswss",
"salary": "1212"
},
{
"name": "john",
"designation": "designer",
"address": "california",
"salary": "3000000"
},
{
"name": "suresh",
"designation": "tester",
"address": "he is from cheeran maanagar",
"salary": "20000"
}
]
}
Can someone help me on how to use DataTables with this application?
回答1:
SOLUTION
Use ajax.dataSrc option to specify property holding data in your JSON response.
For example:
$('#example').DataTable({
// ... skipped other options ...
ajax: {
url: "http://localhost/example22/index.php?r=site/display",
dataSrc: 'allk'
},
columns: [
{ data: "name"},
{ data: "designation"},
{ data: "address" },
{ data: "salary"}
]
});
DEMO
See this jsFiddle for code and demonstration.
回答2:
In Nodejs when you have a DataTable declared like this
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Parents Name</th>
<th>Age</th>
</tr>
</thead>
</table>
then your java script should be like this
$(document).ready(function() {
$("#example").DataTable({
ajax: {
url: "../kidsinfo",
dataSrc: ""
},
columns: [
{ data: "kid_name" },
{ data: "class" },
{ data: "parents_name" },
{ data: "age" },
],
iDisplayLength: 1,
iDisplayStart: 0
});
});
Important point to note here is that your json data from server is like this
[{"id":1,"kid_name":"John","class":"Hancock","parents_name":"dharam","age":"21"}]
then your javascript code should use the name kid_name
from the json data received to relate the information you want to display in the column.
If the json data from the server is like this
{
"info": [{
"id": 1,
"kid_name": "John",
"class": "Hancock",
"parents_name": "dharam",
"age": "21"
}]
}
then your java script should have dataSrc: "info"
来源:https://stackoverflow.com/questions/32531750/how-to-display-json-data-in-jquery-datatables-via-ajax