Want more features on Pastebin? Sign Up, it's FREE!
Guest

row_reorder

By: a guest on Feb 19th, 2013  |  syntax: HTML  |  size: 6.55 KB  |  views: 21  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. -- table --
  2.  
  3.  
  4. <table class="table table-vam table-striped" id="dday_label_table">
  5.   <thead>
  6.     <tr>
  7.       <th style="width:20px"></th>
  8.       <th class="table_checkbox" style="width:20px"><input type="checkbox" name="select_rows" class="select_rows" data-tableid="dday_label_table" /></th>
  9.       <th>Icona</th>
  10.       <th>Nome</th>
  11.       <th>Stato</th>
  12.       <th>Azioni</th>
  13.     </tr>
  14.   </thead>
  15.   <tbody>
  16.     <tr id="100">
  17.       <td>1</td>
  18.       <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  19.       <td style="width:70px">
  20.         <img alt="" src="img/label.png" style="height:60px;width:60px" />
  21.       </td>
  22.       <td>
  23.         <h5>Multimedia</h5>
  24.       </td>
  25.       <td><span class="label label-success">Attiva</span> <span class="label label-warning">Menu</span> <span class="label">Visibile</span></td>
  26.       <td>
  27.         <div class="btn-group">
  28.           <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  29.           <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  30.           <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  31.           <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  32.         </div>
  33.       </td>
  34.     </tr>
  35.     <tr id="101">
  36.       <td>2</td>
  37.       <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  38.       <td style="width:70px">
  39.         <img alt="" src="img/label.png" style="height:60px;width:60px" />
  40.       </td>
  41.       <td>
  42.         <h5>Social</h5>
  43.       </td>
  44.       <td><span class="label label-success">Attiva</span> <span class="label label-warning">Menu</span> <span class="label">Visibile</span></td>
  45.       <td>
  46.         <div class="btn-group">
  47.           <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  48.           <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  49.           <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  50.           <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  51.         </div>
  52.       </td>
  53.     </tr>
  54.     <tr id="102">
  55.       <td>3</td>
  56.       <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  57.       <td style="width:70px">
  58.         <img alt="" src="img/label.png" style="height:60px;width:60px" />
  59.       </td>
  60.       <td>
  61.         <h5>TV & Video</h5>
  62.      </td>
  63.      <td><span class="label label-success">Attiva</span> <span class="label label-warning">Menu</span> <span class="label">Visibile</span></td>
  64.      <td>
  65.        <div class="btn-group">
  66.          <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  67.          <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  68.          <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  69.          <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  70.        </div>
  71.      </td>
  72.    </tr>
  73.    <tr id="103">
  74.      <td>4</td>
  75.      <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  76.      <td style="width:70px">
  77.        <img alt="" src="img/label.png" style="height:60px;width:60px" />
  78.       </td>
  79.       <td>
  80.         <h5>Android</h5>
  81.       </td>
  82.       <td><span class="label label-important">Non attiva</span> <span class="label label-warning">Menu</span></td>
  83.       <td>
  84.         <div class="btn-group">
  85.           <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  86.           <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  87.           <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  88.           <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  89.         </div>
  90.       </td>
  91.     </tr>
  92.     <tr id="104">
  93.       <td>5</td>
  94.       <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  95.       <td style="width:70px">
  96.         <img alt="" src="img/label.png" style="height:60px;width:60px" />
  97.       </td>
  98.       <td>
  99.         <h5>Gaming</h5>
  100.       </td>
  101.       <td><span class="label label-success">Attiva</span> <span class="label label-warning">Menu</span> <span class="label">Visibile</span></td>
  102.       <td>
  103.         <div class="btn-group">
  104.           <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  105.           <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  106.           <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  107.           <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  108.         </div>
  109.       </td>
  110.     </tr>
  111.     <tr id="105">
  112.       <td>6</td>
  113.       <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  114.       <td style="width:70px">
  115.         <img alt="" src="img/label.png" style="height:60px;width:60px" />
  116.       </td>
  117.       <td>
  118.         <h5>Apple</h5>
  119.       </td>
  120.       <td><span class="label label-important">Non attiva</span> <span class="label label-warning">Menu</span> <span class="label">Visibile</span></td>
  121.       <td>
  122.         <div class="btn-group">
  123.           <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  124.           <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  125.           <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  126.           <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  127.         </div>
  128.       </td>
  129.     </tr>
  130.     <tr id="106">
  131.       <td>7</td>
  132.       <td><input type="checkbox" name="row_sel" class="row_sel" /></td>
  133.       <td style="width:70px">
  134.         <img alt="" src="img/label.png" style="height:60px;width:60px" />
  135.       </td>
  136.       <td>
  137.         <h5>Audio</h5>
  138.       </td>
  139.       <td><span class="label label-success">Attiva</span> <span class="label">Visibile</span></td>
  140.       <td>
  141.         <div class="btn-group">
  142.           <a href="#" class="btn btn-mini" title="Edit"><i class="icon-pencil"></i></a>
  143.           <a href="#" class="btn btn-mini" title="Activate"><i class="icon-ok-circle"></i></a>
  144.           <a href="#" class="btn btn-mini" title="Disattiva"><i class="icon-minus-sign"></i></a>
  145.           <a href="#" class="btn btn-mini" title="Delete"><i class="icon-trash"></i></a>
  146.         </div>
  147.       </td>
  148.     </tr>
  149.   </tbody>
  150. </table>
  151.  
  152. -- js code --
  153. $('#dday_label_table').dataTable({
  154.   bJQueryUI: true,
  155.   "sPaginationType": "bootstrap",
  156.   "bAutoWidth": false
  157. }).rowReordering();
clone this paste RAW Paste Data