DataTables, Form, paging and Dom

xiligroup

As developer of free plugins for WordPress, managing medium size lists (less than 300 lines), after long days of comparative tests, I decide to choose DataTables to display lists with paging in settings UI.
The implementation is nearly easy and dialog with js of DataTables code well designed… (also for internationalization).
FORM BEHAVIOUR SURPRISE
One of lists was also a form and so with JS a paged form - To made an quick change, I conserve DOM dialog with database as before. And after tests, I discovered that only the page displayed was sent with the form with bad side effects. I search and found some API on this forums to solve this side effects but because each row contains lot of inputs and the perspective of long coding: I finally decide to "destroy" (fnDestroy) the paging before sending submit. (for look: the table is hidden and replace by a message)

With some advantages: the user can navigate between the pages and checks what he wants and finally sends a Submit ! And for developer, nothing to change on server side.

Examples of code for submit button in ready

[code]
$('#update').click( function () {

$('#assigntable').hide();
$('#tableupdating').height(200);
$('#tableupdating').html("

<?php _e('Updating table of tags !','xili_tidy_tags') ?>"); // and php translation
$('#tableupdating').show();
assignTable.fnDestroy();
} );
[/code]

[code]
// example of call
var assignTable;
jQuery(document).ready( function($) {

var assignTable = $('#assigntable').dataTable( {
"iDisplayLength": 30,
"bStateSave": true,
"sDom": '<"topbanner"ipf>rt<"bottombanner"lp><"clear">',
"sPaginationType": "full_numbers",
"aLengthMenu": [[15, 30, 60, -1], [15, 30, 60, "<?php _e('All lines','xili_tidy_tags') ?>"]],
"oLanguage": {
"oPaginate": {
"sFirst": "<?php _e('First','xili_tidy_tags') ?>",
"sLast": "<?php _e('Last page','xili_tidy_tags') ?>",
"sNext": "<?php _e('Next','xili_tidy_tags') ?>",
"sPrevious": "<?php _e('Previous','xili_tidy_tags') ?>"
},
"sInfo": "<?php _e('Showing (_START_ to _END_) of _TOTAL_ tags','xili_tidy_tags') ?>",
"sInfoFiltered": "<?php _e('(filtered from _MAX_ total entries)','xili_tidy_tags') ?>",
"sLengthMenu": "<?php _e('Show _MENU_ tags','xili_tidy_tags') ?>"
},
"aaSorting": [[1,'asc']],
"aoColumns": [
{ "bSearchable": false },
null,
{ "bSortable": false, "bSearchable": false },
{ "bSortable": false, "bSearchable": false }]
} );
//....

[/code]

Hope that experience can help !

Michel - dev.xiligroup.com

Note: the result on WP repository http://wordpress.org/extend/plugins/xili-tidy-tags/ xili-tidy-tags 1.5.0 will be soon available.

allan

Very nice! Thanks for the post.

Allan