Add the JQuery. dataTables table plug-in to jump to the specified page,

Add the JQuery. dataTables table plug-in to jump to the specified page,

I. Solutions

1. Add a custom toolbar and embed the text box

"Dom": 'l <"toolbar"> frtip ', // customize The toolbar // set The toolbar content // l-length changing input control // f-filtering input // t-The table! // I-Table information summary // p-pagination control // r-processing display element [javascript] view plain copy print? $ ("Div. toolbar "ingress .html ('<B style =" color: red "> jump to the </B> <input id =" searchNumber "/> <B style =" color: red; "> page </B> ');

2. Listen to the change event in the text box and execute the method for transferring the page of the plug-in.

// Tune to the specified page index. Note the case sensitivity var oTable = $ ('# example1'). dataTable (); oTable. fnPageChange (page );

3. After the plug-in is successfully drawn, bind the value of the text box

// Triggered when drawing, bind the value table of the text box. on ('draw. dt ', function (e, settings, data) {var info = table.page.info (); // If the page here is 0, console.info ('showing page:' + info. page + 'of' + info. pages); $ ('# searchNumber '). val (info. page + 1 );});

Ii. Complete sample code

<Table id = "example1" class = "table-hover table-striped"> <thead> <tr> <th> NO. </th> <th> name </th> <th> gender </th> <th> birthday </th> <th> class </th> </tr> </thead> </table> $ (function () {// note that the method is named able var table =$ ('# example1 '). dataTable ({"dom": 'l <"toolbar"> frtip ', // custom toolbar "pagingType": "full_numbers", lengthMenu: [3, 5, 10], processing: true, // whether to use progress bar serverSide: true, // whether to enable Database loading ajax: {url: '/tableone/getlist', type: 'post', data: function (d) {d. name = 'zhang san';/** custom aja parameter * special description. Here, you can override the default parameters of the control, such as the paging parameter * // d. start = 0; // lele.info (d); // var page = $ ('# searchnumber '). val (); // page = parseInt (page) | 1; // d. start = (page-1) * d. length ;}}, // specify the columns: [{data: 'sno'}, {data: 'sname'}, {data: 'ssex '}, {data: 'sbirthday'}, {data: 'class'}], order: [[3, 'desc']}); $ ("div. toolbar "ingress .html ('<B style =" color: red "> jump to the </B> <input id =" searchNumber "/> <B style =" color: red; "> page </B> '); // bind a page event ---- triggered when the page is switched. // table. on ('page. dt ', function () {// var info = table.page.info (); // lele.info ('showing page:' + info. page + 'of' + info. pages); //}); // triggered when drawing, bind the value table of the text box. on ('draw. dt ', function (e, settings, data) {var info = table.page.info (); // If the page here is 0, console.info ('showing page:' + info. page + 'of' + info. pages); $ ('# searchNumber '). val (info. page + 1) ;}); // modify the listening text box $ ('# searchnumber '). change (function () {var page = $ (this ). val (); page = parseInt (page) | 1; page = page-1; // you can call the specified page index, note the case sensitivity var oTable = $ ('# example1 '). dataTable (); oTable. fnPageChange (page );});});

Shown as follows:

The above section describes JQuery. the dataTables table plug-in is added to jump to the specified page. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!