SHARE
TWEET

Pt.1: DataTables ColReorder Ajax State Save

planzelle Dec 1st, 2015 95 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  5.         <meta name="viewport" content="width=device-width,initial-scale=1">
  6.         <title>DataTables example - Basic initialisation</title>
  7.         <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/bs-3.3.5/jqc-1.11.3,dt-1.10.10,cr-1.3.0,rr-1.1.0/datatables.min.css"/>
  8.         <script type="text/javascript" src="https://cdn.datatables.net/s/bs-3.3.5/jqc-1.11.3,dt-1.10.10,cr-1.3.0,rr-1.1.0/datatables.min.js"></script>
  9.         <script type="text/javascript" class="init">
  10.  
  11.         $(document).ready(function() {
  12.                 var firstTime = true;
  13.                 var table = $('#example').DataTable( {
  14.                         colReorder: true,
  15.                         rowReorder: true,
  16.                         stateSave: true,
  17.                         stateSaveCallback: function (settings, data) {
  18.                                 if (! firstTime) {
  19.                                         // Send an Ajax request to the server with the state object
  20.                                         $.ajax( {
  21.                                                 url: "/state_save.php",
  22.                                                 data: data,
  23.                                                 dataType: "json",
  24.                                                 type: "POST",
  25.                                                 success: function (ret) {
  26.                                                         console.debug(ret);
  27.                                                 }
  28.                                         } );
  29.                                 }
  30.                                 firstTime = false;
  31.                         }
  32.         } );
  33.  
  34.                 $("#loadButton").bind('click', function(evt){
  35.                         $.ajax({
  36.                                 url: "/state_load.php",
  37.                                 data: {},
  38.                                 dataType: "JSON",
  39.                                 type: "POST",
  40.                                 success: function(data) {
  41.                                         table.colReorder.order(data.ColReorder);
  42.                                 }
  43.                         });
  44.                        
  45.                 });
  46.  
  47.         } );
  48.  
  49. </script>
  50. <style>body {margin:10px;}</style>
  51. </head>
  52. <body>
  53. <table id="example" class="display" cellspacing="0" width="100%">
  54.                                         <thead>
  55.                                                 <tr>
  56.                                                         <th>Seq.</th>
  57.                                                         <th>Name</th>
  58.                                                         <th>Position</th>
  59.                                                         <th>Office</th>
  60.                                                         <th>Start date</th>
  61.                                                         <th>Salary</th>
  62.                                                 </tr>
  63.                                         </thead>
  64.                                         <tfoot>
  65.                                                 <tr>
  66.                                                         <th>Seq.</th>
  67.                                                         <th>Name</th>
  68.                                                         <th>Position</th>
  69.                                                         <th>Office</th>
  70.                                                         <th>Start date</th>
  71.                                                         <th>Salary</th>
  72.                                                 </tr>
  73.                                         </tfoot>
  74.                                         <tbody>
  75.                                                 <tr>
  76.                                                         <td>2</td>
  77.                                                         <td>Tiger Nixon</td>
  78.                                                         <td>System Architect</td>
  79.                                                         <td>Edinburgh</td>
  80.                                                         <td>2011/04/25</td>
  81.                                                         <td>$320,800</td>
  82.                                                 </tr>
  83.                                                 <tr>
  84.                                                         <td>22</td>
  85.                                                         <td>Garrett Winters</td>
  86.                                                         <td>Accountant</td>
  87.                                                         <td>Tokyo</td>
  88.                                                         <td>2011/07/25</td>
  89.                                                         <td>$170,750</td>
  90.                                                 </tr>
  91.                                                 <tr>
  92.                                                         <td>6</td>
  93.                                                         <td>Ashton Cox</td>
  94.                                                         <td>Junior Technical Author</td>
  95.                                                         <td>San Francisco</td>
  96.                                                         <td>2009/01/12</td>
  97.                                                         <td>$86,000</td>
  98.                                                 </tr>
  99.                                         </tbody>
  100.                                 </table>
  101.  
  102. <form id="loadForm"><input type="button" value="Load" id="loadButton" /></form>
  103. </body>
  104. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top