File
Add library
Share
Login or Register
Help
HTML
 
<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.2/dist/css/bootstrap-blackbox.min.css" rel="stylesheet">
​
    <link href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css" rel="stylesheet" >
    
​
<link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css" rel="stylesheet" >
<link href="https://cdn.datatables.net/buttons/2.1.0/css/buttons.dataTables.min.css" rel="stylesheet" >
<link href="https://cdn.datatables.net/searchpanes/1.4.0/css/searchPanes.dataTables.min.css" rel="stylesheet" 
<link href="https://cdn.datatables.net/rowreorder/1.2.8/css/rowReorder.bootstrap5.min.css" rel="stylesheet" >
<link href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.bootstrap5.min.css" rel="stylesheet" >
​
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
​
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-dark-5@1.1.2/dist/js/darkmode.min.js"></script>
​
<script src="https://nightly.datatables.net/searchpanes/js/dataTables.searchPanes.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.4.0/js/dataTables.searchPanes.min.js"></script>
       <script src="https://cdn.datatables.net/rowreorder/1.2.8/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.1.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.1.0/js/buttons.colVis.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta2/dist/css/bootstrap-select.min.css">
   
  
​
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
​
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
        <div class="container">
          <div id="result">
        Event result:
    </div>
            <table id="example" class="table" width="100%">
                <thead>
                    <tr>
                    
                 <th style="width:1px !important;">Seq.</th>
                 <th style="width:1px !important;">!!</th>
               
                <th>Name</th>
                <th>Rank</th>
                <th>Bullets</th>
                <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                <th>Notes</th>
                 <th>Cash</th>
                 <th>Country</th>
                 <th>Owner</th>
                  <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                
                
                <th style="width: auto !important;"></th>
                <th style="width: auto !important;"></th>   
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                           <th style="width:1px !important;">Seq.</th>
                 <th style="width:1px !important;">!!</th>
               
                <th>Name</th>
                <th>Rank</th>
                <th>Bullets</th>
                <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                <th>Notes</th>
                 <th>Cash</th>
                 <th>Country</th>
                 <th>Owner</th>
                  <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                <th style="width:10px !important;"></th>
                
                
                <th style="width: auto !important;"></th>
                <th style="width: auto !important;"></th>
                    </tr>
                </tfoot>
               <tbody>
         <tr id="10540" class="odd"><td>7226</td><td><font color="#ffffff">358</font></td><td><font color="#ffffff">Six Nations</font></td><td><font color="#ffffff">Boss</font></td><td>10900</td><td><input type="submit" value="Killer" style="width:57px !important;" class="example_y" onclick="movekiller(10596) "></td><td><input type="submit" value="Holder" style="width:57px !important;" class="example_y" onclick="moveholder(10596) "></td><td>30k</td><td>129.837.360</td><td><font color="#ffffff">GB</font></td><td><font color="#ffffff">Wietze</font></td><td>0</td><td><input type="button" value=" Edit " id="10596" style="width:57px !important;" class="example_z edit_data"></td><td><input type="submit" value="Top" class="example_f" onclick="ordertop(10596) "></td><td><input type="submit" value="↓" style="font-size:15px; width:29px !important;" class="example_f confirm" onclick="orderdown(10596) "></td><td><input type="submit" value="↑" style="font-size:15px; width:29px !important;" class="example_f" onclick="orderup(10596) "></td><td><input type="submit" name="10596" value="Login" style="width:57px !important;" class="example_x LoginOnAccount"></td></tr>
                 <tr id="10596" class="odd"><td>9528</td><td><font color="#ffffff">358</font></td><td><font color="#ffffff">Six Nations</font></td><td><font color="#ffffff">Boss</font></td><td>10900</td><td><input type="submit" value="Killer" style="width:57px !important;" class="example_y" onclick="movekiller(10596) "></td><td><input type="submit" value="Holder" style="width:57px !important;" class="example_y" onclick="moveholder(10596) "></td><td>30k</td><td>129.837.360</td><td><font color="#ffffff">GB</font></td><td><font color="#ffffff">Wietze</font></td><td>0</td><td><input type="button" value=" Edit " id="10596" style="width:57px !important;" class="example_z edit_data"></td><td><input type="submit" value="Top" class="example_f" onclick="ordertop(10596) "></td><td><input type="submit" value="↓" style="font-size:15px; width:29px !important;" class="example_f confirm" onclick="orderdown(10596) "></td><td><input type="submit" value="↑" style="font-size:15px; width:29px !important;" class="example_f" onclick="orderup(10596) "></td><td><input type="submit" name="10596" value="Login" style="width:57px !important;" class="example_x LoginOnAccount"></td></tr>
                 <tr id="10597" class="odd"><td>9529</td><td><font color="#ffffff">358</font></td><td><font color="#ffffff">Six Nations</font></td><td><font color="#ffffff">Boss</font></td><td>10900</td><td><input type="submit" value="Killer" style="width:57px !important;" class="example_y" onclick="movekiller(10596) "></td><td><input type="submit" value="Holder" style="width:57px !important;" class="example_y" onclick="moveholder(10596) "></td><td>30k</td><td>129.837.360</td><td><font color="#ffffff">GB</font></td><td><font color="#ffffff">Wietze</font></td><td>0</td><td><input type="button" value=" Edit " id="10596" style="width:57px !important;" class="example_z edit_data"></td><td><input type="submit" value="Top" class="example_f" onclick="ordertop(10596) "></td><td><input type="submit" value="↓" style="font-size:15px; width:29px !important;" class="example_f confirm" onclick="orderdown(10596) "></td><td><input type="submit" value="↑" style="font-size:15px; width:29px !important;" class="example_f" onclick="orderup(10596) "></td><td><input type="submit" name="10596" value="Login" style="width:57px !important;" class="example_x LoginOnAccount"></td></tr>
                 <tr id="10598" class="odd"><td>10235</td><td><font color="#ffffff">358</font></td><td><font color="#ffffff">Six Nations</font></td><td><font color="#ffffff">Boss</font></td><td>10900</td><td><input type="submit" value="Killer" style="width:57px !important;" class="example_y" onclick="movekiller(10596) "></td><td><input type="submit" value="Holder" style="width:57px !important;" class="example_y" onclick="moveholder(10596) "></td><td>30k</td><td>129.837.360</td><td><font color="#ffffff">GB</font></td><td><font color="#ffffff">Wietze</font></td><td>0</td><td><input type="button" value=" Edit " id="10596" style="width:57px !important;" class="example_z edit_data"></td><td><input type="submit" value="Top" class="example_f" onclick="ordertop(10596) "></td><td><input type="submit" value="↓" style="font-size:15px; width:29px !important;" class="example_f confirm" onclick="orderdown(10596) "></td><td><input type="submit" value="↑" style="font-size:15px; width:29px !important;" class="example_f" onclick="orderup(10596) "></td><td><input type="submit" name="10596" value="Login" style="width:57px !important;" class="example_x LoginOnAccount"></td></tr>
        </tbody>
            </table>
        </div>
    </body>
</html>
CSS
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
JavaScript
 
$(document).ready(function() {
              
    
                var table = $('#example').dataTable({
​
                
​
                "sFilterInput": "form-control search-box",
                "order": [],
                processing: '<div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div>',
                language: { search: '', searchPlaceholder: "Search in table...",searchPanes: {
                clearMessage: 'Reset Filters',
                collapse: {0: 'Filters', _: 'Filters Active (%d)'} }},
        "paging": false,      
                rowId: 'id',
        rowReorder: true,
         
                    
        
                //"ajax": "../../hhh.php",
 "columns": [
                {data: 'new_sequence'},
                {data: 'paydays',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                } } , 
                
                {data: 'name',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                } } , 
                {data: 'rang',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                } } ,   
                {data: 'bullets',
                render: function ( data, type, row, meta ) {
                return ''+data+'';
                } } , 
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="Killer" style="width:57px !important;" class="example_y" onClick="movekiller(' + item.id + ') "/>' ;} },
                    { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="Holder" style="width:57px !important;" class="example_y" onClick="moveholder(' + item.id + ') "/>'; } },
            
                {data: 'notes',
                render: function ( data, type, row, meta ) {
                return ''+data+'';
                }},
                {data: 'mobcash',
                render: function ( data, type, row, meta ) {
                    if ( type === 'display' || type === 'filter' ) {
               return ''+ $.fn.dataTable.render.number( '.', '.', 0 ).display(data) + '';
                    } return data;
               } },
               {data: 'land',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'door',
                render: function ( data, type, row, meta ) {
                return '<font color='+row.cat_color+'>'+data+'</font>';
                }},
                {data: 'do_lead'},
                    
                    { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="button" value=" Edit " id= ' + item.id + ' style="width:57px !important;" class="example_z edit_data" />' ;} },
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="Top" class="example_f" onClick="ordertop(' + item.id + ') "/>' ;} },
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="&#x2193;" style="font-size:15px; width:29px !important;" class="example_f confirm" onClick="orderdown(' + item.id + ') "/>' ;} },
            { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" value="&#x2191;" style="font-size:15px; width:29px !important;" class="example_f" onClick="orderup(' + item.id + ') "/>' ;} },
                { 'data': null, title: '', wrap: true, "render": function (item) { return '<input type="submit" name = ' + item.id + ' value="Login" style="width:57px !important;" class="example_x LoginOnAccount" >' ;} },
        
                 ]
             
             
    
    }); // end datatable
var table = $('#example').DataTable();
 table.on("row-reorder", function (e, diff, edit) {
  var temp = edit.triggerRow.data();
  var result =
    "Reorder started on row: " + edit.triggerRow.data()["name"] + "<br>";
​
  for (var i = 0, ien = diff.length; i < ien; i++) {
​
    var rowData = table.row(diff[i].node).data();
​
    result +=
      rowData["name"] +
      " updated to be in position " +
      diff[i].newData +
      " (was " +
      diff[i].oldData +
      ")<br>";
  }
​
  $("#result").html("Event result:<br>" + result);
});
});
3 warnings
Line 74: 'table' is already defined.
Line 78: ['name'] is better written in dot notation.
Line 85: ['name'] is better written in dot notation.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers