A general 'search' scenario
A general 'search' scenario
OK. Here's my features of a 'search' function in a site, which i think is quite general. I have implemented and it works fine, but I want to see if there's space for any improvement or if i've got some misuse in dataTables.
Feature requests:
1) When user first requests a page, it should display an empty table, but still with all the pagination information visible.
2) When user makes some input to search criteria and hits 'Search' button, request will be made to server and returned search result data be displayed in the dataTable.
My solution to first requirement is a bit dirty. I call dataTable() method with default options so that even by default there's no data to display, i can still get the dataTable appearance.
When user wants to search with criteria, it's awesome to have fnServerParams api handy for use, like this:
[code]
"fnServerParams": function (aoData) {
aoData.push({ "name": "data", "value": JSON.stringify(searchModel) });
},
[/code]
For returned data to display, i don't know how to update the existing dataTable with a completely different options. So i set bDestroy to true to replace the default empty table with one having search result data. Don't know if this is the best way to do, though.
For paging and sorting to work, luckily dataTable includes detailed data in posted form so that i can extract out the parameter and perform search accordingly in server side, even though the parameters naming is a bit awkward to me. lol. Again, every time user wants to page or sort, a new dataTable is created and replaces the previous one. Might be some performance hurt here. Enlighten me.
One last feature is to display hyperlinks on some columns. Again, Allan has done a thoughtful work providing the mRender function in aoColumnDefs option:
[code]
"mRender": function (data, type, full) {
return '' + data + '';
}
[/code]
Very good framework, although it comes with a learning curve. Still it deserves and the all the learning will pay off with a good product.
Feel free to help with any idea for improvement. Thanks.
Feature requests:
1) When user first requests a page, it should display an empty table, but still with all the pagination information visible.
2) When user makes some input to search criteria and hits 'Search' button, request will be made to server and returned search result data be displayed in the dataTable.
My solution to first requirement is a bit dirty. I call dataTable() method with default options so that even by default there's no data to display, i can still get the dataTable appearance.
When user wants to search with criteria, it's awesome to have fnServerParams api handy for use, like this:
[code]
"fnServerParams": function (aoData) {
aoData.push({ "name": "data", "value": JSON.stringify(searchModel) });
},
[/code]
For returned data to display, i don't know how to update the existing dataTable with a completely different options. So i set bDestroy to true to replace the default empty table with one having search result data. Don't know if this is the best way to do, though.
For paging and sorting to work, luckily dataTable includes detailed data in posted form so that i can extract out the parameter and perform search accordingly in server side, even though the parameters naming is a bit awkward to me. lol. Again, every time user wants to page or sort, a new dataTable is created and replaces the previous one. Might be some performance hurt here. Enlighten me.
One last feature is to display hyperlinks on some columns. Again, Allan has done a thoughtful work providing the mRender function in aoColumnDefs option:
[code]
"mRender": function (data, type, full) {
return '' + data + '';
}
[/code]
Very good framework, although it comes with a learning curve. Still it deserves and the all the learning will pay off with a good product.
Feel free to help with any idea for improvement. Thanks.
This discussion has been closed.
Replies
bDestroy is the way to do it. Having the ability to dynamically change configuration options (paging, scrolling, types etc) would add a huge amount of code to the DataTables code base - and its already quite big enough :-).
> Again, every time user wants to page or sort, a new dataTable is created and replaces the previous one. Might be some performance hurt here. Enlighten me.
Sounds like you've enabled server-side processing. If you have, then yes, it will make a request for every draw - that's the point of server-side processing :-). If you don't want it to do that, don't enable server-side processing with the bServerSide option.
Allan