How To Consume Ajax Returned Json Data In Datatables And Have A Form In Each Row
Solution 1:
Consuming Ajax data in DataTables
There is already a handy feature in DataTables to fetch data from ajax and consume them as you configure your table. Just use the ajax option and tell about the data source you want to consume
$('#dataList').DataTable({
ajax: {
url: 'url',
type: 'GET',
dataSrc: ''
}
}
See this documentation for complete guideline.
Note: here passing dataSrc option as empty tells dataTable to expect an array rather than objects from ajax response
Following is a example that depicts a senario where datatable is configured to consume a api response. For demonastration purpose I used a public dummy api service that returned an json array. See this dummy api response.
$(function() {
var columnArray = [{
title: "Photo ID",
data: "id",
targets: 0
},
{
title: "Photo Title",
data: "title",
targets: 1
}
];
$('#dataList').DataTable({
ajax: {
url: 'https://jsonplaceholder.typicode.com/photos',
type: 'GET',
dataSrc: ''
},
bBootstrapLayout: true,
columns: columnArray,
columnDefs: [{
render: function(data, type, row) {
return data + ' (' + row['albumId'] + ')';
},
targets: 0
}, {
render: function(data, type, row) {
var html = '<button>view</button>';
return html;
},
targets: 2
}]
});
});
<head><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /><scriptsrc="https://code.jquery.com/jquery-2.1.1.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script><linkhref="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /><head><body><br><br><divclass="row"><divclass="col-lg-1"></div><divclass="col-lg-6"><div><tableid="dataList"class="table"data-page-length="1"cellspacing="0"width="100%" /></div></div></div></body>Having Custom button or form in row
In your datatable you can configure each column rendering logic. Like the case you are dealing, you want separate columns of button behave as form submission.
You should tell this in columnDefs option as passing an array of definations.
In the code snippet above I also showed how you can achive that. In that example I added 3rd column (target: 2) by defining its rendering logic. In render callback you can return html that should be placed in that column. I only added <button>view</button> but as you see you can return any html like forms with input fields and buttons and whats not. render option takes a function that is provided with data, type, row parameters. Hence you can exploit these data for rendering your column html or any logic you what. Thats a lot of flexibility, isn't it ?
You will find a complementary guildline from this columnDefs documentation.
Post a Comment for "How To Consume Ajax Returned Json Data In Datatables And Have A Form In Each Row"