src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/plugins/datatables/extensions/ColReorder/examples/server_side.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4         <meta charset="utf-8">
   5         <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
   6         <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
   7
   8         <title>ColReorder example - Server-side processing</title>
   9         <link rel="stylesheet" type="text/css" href="../../../media/css/jquery.dataTables.css">
  10         <link rel="stylesheet" type="text/css" href="../css/dataTables.colReorder.css">
  11         <link rel="stylesheet" type="text/css" href="../../../examples/resources/syntax/shCore.css">
  12         <link rel="stylesheet" type="text/css" href="../../../examples/resources/demo.css">
  13         <style type="text/css" class="init">
  14
  15         </style>
  16         <script type="text/javascript" language="javascript" src="../../../media/js/jquery.js"></script>
  17         <script type="text/javascript" language="javascript" src="../../../media/js/jquery.dataTables.js"></script>
  18         <script type="text/javascript" language="javascript" src="../js/dataTables.colReorder.js"></script>
  19         <script type="text/javascript" language="javascript" src="../../../examples/resources/syntax/shCore.js"></script>
  20         <script type="text/javascript" language="javascript" src="../../../examples/resources/demo.js"></script>
  21         <script type="text/javascript" language="javascript" class="init">
  22
  23
  24
  25 $(document).ready(function() {
  26         $('#example').dataTable( {
  27                 dom: 'Rlfrtip',
  28                 processing: true,
  29                 serverSide: true,
  30                 ajax: "../../../examples/server_side/scripts/objects.php",
  31                 columns: [
  32                         { data: "first_name" },
  33                         { data: "last_name" },
  34                         { data: "position" },
  35                         { data: "office" },
  36                         { data: "start_date" },
  37                         { data: "salary" }
  38                 ]
  39         } );
  40 } );
  41
  42
  43
  44         </script>
  45 </head>
  46
  47 <body class="dt-example">
  48         <div class="container">
  49                 <section>
  50                         <h1>ColReorder example <span>Server-side processing</span></h1>
  51
  52                         <div class="info">
  53                                 <p>Server-side processing can be exceptionally useful in DataTables when dealing with massive data sets, and ColReorder works with this as would be expected.</p>
  54
  55                                 <p>It is recommend that you use object based data with server-side processing and ColReorder, as this provides easily understandable mapping between the the
  56                                 columns and the data relation on the server, otherwise you need to work out array indexes on each call!</p>
  57                         </div>
  58
  59                         <table id="example" class="display" cellspacing="0" width="100%">
  60                                 <thead>
  61                                         <tr>
  62                                                 <th>Name</th>
  63                                                 <th>Position</th>
  64                                                 <th>Office</th>
  65                                                 <th>Extn.</th>
  66                                                 <th>Start date</th>
  67                                                 <th>Salary</th>
  68                                         </tr>
  69                                 </thead>
  70
  71                                 <tfoot>
  72                                         <tr>
  73                                                 <th>Name</th>
  74                                                 <th>Position</th>
  75                                                 <th>Office</th>
  76                                                 <th>Extn.</th>
  77                                                 <th>Start date</th>
  78                                                 <th>Salary</th>
  79                                         </tr>
  80                                 </tfoot>
  81                         </table>
  82
  83                         <ul class="tabs">
  84                                 <li class="active">Javascript</li>
  85                                 <li>HTML</li>
  86                                 <li>CSS</li>
  87                                 <li>Ajax</li>
  88                                 <li>Server-side script</li>
  89                         </ul>
  90
  91                         <div class="tabs">
  92                                 <div class="js">
  93                                         <p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
  94         $('#example').dataTable( {
  95                 dom: 'Rlfrtip',
  96                 processing: true,
  97                 serverSide: true,
  98                 ajax: &quot;../../../examples/server_side/scripts/objects.php&quot;,
  99                 columns: [
 100                         { data: &quot;first_name&quot; },
 101                         { data: &quot;last_name&quot; },
 102                         { data: &quot;position&quot; },
 103                         { data: &quot;office&quot; },
 104                         { data: &quot;start_date&quot; },
 105                         { data: &quot;salary&quot; }
 106                 ]
 107         } );
 108 } );</code>
 109
 110                                         <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
 111
 112                                         <ul>
 113                                                 <li><a href="../../../media/js/jquery.js">../../../media/js/jquery.js</a></li>
 114                                                 <li><a href="../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js</a></li>
 115                                                 <li><a href="../js/dataTables.colReorder.js">../js/dataTables.colReorder.js</a></li>
 116                                         </ul>
 117                                 </div>
 118
 119                                 <div class="table">
 120                                         <p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 121                                 </div>
 122
 123                                 <div class="css">
 124                                         <div>
 125                                                 <p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 126                                                 additional CSS used is shown below:</p><code class="multiline language-css"></code>
 127                                         </div>
 128
 129                                         <p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
 130
 131                                         <ul>
 132                                                 <li><a href="../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css</a></li>
 133                                                 <li><a href="../css/dataTables.colReorder.css">../css/dataTables.colReorder.css</a></li>
 134                                         </ul>
 135                                 </div>
 136
 137                                 <div class="ajax">
 138                                         <p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
 139                                         loaded.</p>
 140                                 </div>
 141
 142                                 <div class="php">
 143                                         <p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
 144                                         processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
 145                                         documentation</a>.</p>
 146                                 </div>
 147                         </div>
 148                 </section>
 149         </div>
 150
 151         <section>
 152                 <div class="footer">
 153                         <div class="gradient"></div>
 154
 155                         <div class="liner">
 156                                 <h2>Other examples</h2>
 157
 158                                 <div class="toc">
 159                                         <div class="toc-group">
 160                                                 <h3><a href="./index.html">Examples</a></h3>
 161                                                 <ul class="toc active">
 162                                                         <li><a href="./simple.html">Basic initialisation</a></li>
 163                                                         <li><a href="./new_init.html">Initialisation using `new`</a></li>
 164                                                         <li><a href="./alt_insert.html">Alternative insert styling</a></li>
 165                                                         <li><a href="./realtime.html">Realtime updating</a></li>
 166                                                         <li><a href="./state_save.html">State saving</a></li>
 167                                                         <li><a href="./scrolling.html">Scrolling table</a></li>
 168                                                         <li><a href="./predefined.html">Predefined column ordering</a></li>
 169                                                         <li><a href="./reset.html">Reset ordering API</a></li>
 170                                                         <li><a href="./colvis.html">ColVis integration</a></li>
 171                                                         <li><a href="./fixedcolumns.html">FixedColumns integration</a></li>
 172                                                         <li><a href="./fixedheader.html">FixedHeader integration</a></li>
 173                                                         <li><a href="./jqueryui.html">jQuery UI styling</a></li>
 174                                                         <li><a href="./col_filter.html">Individual column filtering</a></li>
 175                                                         <li class="active"><a href="./server_side.html">Server-side processing</a></li>
 176                                                 </ul>
 177                                         </div>
 178                                 </div>
 179
 180                                 <div class="epilogue">
 181                                         <p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 182                                         Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
 183                                         which extend the capabilities of DataTables.</p>
 184
 185                                         <p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
 186                                         DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 187                                 </div>
 188                         </div>
 189                 </div>
 190         </section>
 191 </body>
 192 </html>