File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="tbl" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>User id</th>
            <th>Email</th>
            <th>Date</th>
          </tr>
        </thead>
​
        <tbody>
          
        </tbody>
      </table>
    </div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
​
     
        
     $(document).ready(function() {
​
       var remove = false;
​
    var data = [
    {
        "u_user_id": "1",
        "u_email": "test@test.cz",
        "m_date": "2021-10-16",
    },
    {
        "u_user_id": "1",
        "u_email": "test@test.cz",
        "m_date": "2021-10-16",
    },
    ];
        
         $('#tbl').DataTable({
           
             pageLength: 20,
             data: data,
             lengthMenu: [
                 [1, 5, 10, 25, 50, -1],
                 [1, 5, 10, 25, 50, "All"]
             ],
             dom: 'Blfrtip',
             buttons: [{
                     extend: 'copyHtml5',
                     exportOptions: {
                         columns: ':visible',
                         orthogonal: 'export',
                     }
                 },
                 {
                     extend: 'excelHtml5',
                     exportOptions: {
                         columns: ':visible',
                         orthogonal: 'export',
                     }
                 },
                 {
                     extend: 'pdfHtml5',
                     exportOptions: {
                         columns: ':visible',
                         orthogonal: 'export',
                     }
                 },
                 {
                     extend: 'print',
                     exportOptions: {
                         columns: ':visible',
                         orthogonal: 'export',
                     }
                 },
                 {
                     extend: 'colvis',
                 },
             ],
             processing: true,
             responsive: true,
             ordering: false,
             drawCallback: function(settings, json) {
​
                 var table = $('#tbl').DataTable();
                 var nodes = [];
      
                 table.rows().every(function(index) {
​
                     var table = $('#tbl').DataTable();
                     var row = table.row(index);
                     var data = row.data();
​
                     if (previousRow.u_user_id !== undefined && previousRow.u_user_id !== null) {
                         if (data.u_user_id !== null && data.u_user_id !== undefined) {
                             if (data.u_user_id == previousRow.u_user_id) {
                                 remove = true;
                             }
                         }
                     }
​
                     previousRow = data;
​
                     if (remove) {
                         nodes.push(this.node());
                     }
                     remove = false;
                 });
                  
                 nodes.forEach(function(node) {
                     table.row(node).remove().draw();
                 });  
​
             },
             columns: [
                 {
                     data: 'u_user_id',
                 },
                 {
                     data: 'u_email',
                 },
                 {
                     data: 'm_date',
                 },
             ]
         });
     });
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers