File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!doctype html>
​
<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css">
  </head>
​
  <body>
    <div class="container mb-2 mx-auto">
      <hr>
        <input type="checkbox" name="event" value="119"/>119
        <input type="checkbox" name="event" value="123"/>123
        <input type="checkbox" name="event" value="117"/>117
      <hr>
    </div>
​
    <div class="container mb-5">
      <table border="1" id="tablaEventos" class="table table-striped table-bordered" style="width:100%" align="center">
          <thead>
              <tr>
                  <th>Event</th>
                  <th>Description</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>
                      119
                  </td>
                  <td>"Description event 123" made on date: "date"</td>
              </tr>
              <tr>
                  <td>
                      123
                  </td>
                  <td>"Description event 117" made on date: "date"</td>
              </tr>
              <tr>
                  <td>
                      117
                  </td>
                  <td>"Description event 119" made on date: "date"</td>
              </tr>
              <tr>
                  <td>
                      123
                  </td>
                  <td>"Description event 119" made on date: "date"</td>
              </tr>
          </tbody>
      </table>
    </div>
​
    <!-- Modal -->
    <div class="modal fade" data-bs-backdrop="static" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h1 class="modal-title fs-5" id="exampleModalLabel">119</h1>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div class="container mt-3 mb-3">
                    <li id="event-id"> Event:</li>
                    <li id="event-desc"> Description:</li>
            </div>
          </div>
          <div class="modal-footer">
              <div class="container-fluid">
                  <div class="row">
                    <button type="button" class="btn btn-primary col-md-4" name="prev-button" value="-1">Previous Event</button>
                    <button type="button" class="btn btn-primary col-md-4 ms-auto" name="next-button" value="-1">Next Event</button>
                  </div>
              </div>
          </div>
        </div>
      </div>
    </div>
​
 
  <!-- CDN MODAL-->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
​
  <!-- CDN DATA TABLES-->
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
​
​
  </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;
}
​
​
td:first-child {
     cursor:pointer;
     color:blue !important;
     text-decoration:underline;
}
JavaScriptSaved
 
    $(document).ready( function () {
      var table = $('#tablaEventos').DataTable({
          "ordering": false,
//           columnDefs: [
//             {
//               targets: 0,
//               render: function (data, type, row) {
//                 if (type === 'filter') {
//                   // Get the a tag text and trim white space
//                   return $(data).text().trim();
//                 }
//                 return data;
//               }
//             }
//           ]
      });
​
      $('input:checkbox').on('change', function () {
      //build a regex filter string with an or(|) condition
      var events = $('input:checkbox[name="event"]:checked').map(function() {
      return '^' + this.value + '$';
      }).get().join('|');
​
      //filter in column 0, with an regex, no smart filtering, not case sensitive
      table.column(0).search(events, true, false, false).draw(false);
​
      });
      
      function findPrevNext(clickedIndex) {
                
        // Do nothing if index is -1
        if ( clickedIndex == -1 ) {
          return;
        }
        
        // Get the row data
        var row = table.row( clickedIndex );
        var data = row.data();
        
        // Set the modal data to the row data
        $('#exampleModalLabel').html( data[0] );
        $('#event-id').html( 'Event: ' + data[0] );
        $('#event-desc').html( 'Description: ' + data[1] );
        
        var previous = -1;
        var next = -1;
        var rowFound = false;
        
        // Find previous and next rows
        table.rows({search: 'applied'}).every( function ( rowIdx, tableLoop, rowLoop ) {  
          
          if ( rowFound && next === -1) {
            next = this.index();
          }
​
          if ( clickedIndex == rowIdx ) {
            rowFound = true;
          } else if (next === -1) {
            previous = this.index();
          }
        } );
        
        // Apply row indexes for previous and next rows
        $('button[name="prev-button"]').val(previous);
        $('button[name="next-button"]').val(next);
        
      }
​
      $('#tablaEventos tbody').on('click', 'td:first-child', function () {
        
        // Get index of clicked row to set modal data
        findPrevNext( table.row( $(this) ).index() );
        
        // Show the modal
        $('#modal').modal('show');
      });
      
      $('button[name="prev-button"], button[name="next-button"]').on('click', function () {
        
        // Use button value to set modal daa
        findPrevNext( $(this).val() );
      });
      
    });
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers