planzelle

Pt.1: DataTables ColReorder Ajax State Save

Dec 1st, 2015
116
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