API tools faq
paste
Guest User

JQUERY AJAX FILTER TABLE

a guest
Oct 26th, 2020
78
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.36 KB | None | 0 0
raw download clone embed print report
  1. <?php
  2.     /*
  3.     *   JQUERY AJAX FILTER TABLE [UPDATED]
  4.     */
  5. ?>
  6.  
  7. <!DOCTYPE html>
  8. <html lang="en">
  9. <head>
  10.     <link rel="stylesheet" href="assets/css/custom.css">
  11.     <meta charset="UTF-8">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  14.     <title>Ajax Filter table</title>
  15.     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  16.  
  17.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  18.     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  19.  
  20.     <link rel="stylesheet" href="//cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
  21.     <script src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
  22.    
  23.     <script>
  24.         $(document).ready(function(){
  25.             //When the select box changes we get the value from it. Then we do AJAX to get the staffs with this value.
  26.             //On success we parse data into variable and append it to table.
  27.             var filter = $("#filter").val();
  28.  
  29.             $("#table").DataTable({
  30.                 "ajax":{
  31.                     "url":"fetch.php?filter="+filter,
  32.                     "dataSrc":"",
  33.                     "type":"GET"
  34.                 },
  35.                 "columns":[
  36.                     {data: 'id'},
  37.                     {data: 'first_name'},
  38.                     {data: 'last_name'},
  39.                     {data: 'type'}
  40.                 ]
  41.             });
  42.             $( "#filter" ).change(function() {
  43.                 //javascript:location.reload(true);
  44.                 window.location.reload(false);
  45.             });
  46.         });
  47.        
  48.     </script>
  49.    
  50.     <style>
  51.         .checkbox {
  52.             margin-right : 5px;
  53.             font-size:16px;
  54.  
  55.         }
  56.         input[type="checkbox"]{
  57.             margin-right : 5px;
  58.         }
  59.         table {
  60.             margin-top:10px;
  61.         }
  62.         table tr {
  63.             border-bottom: 1px solid #ddd;
  64.         }
  65.         table tr th {
  66.             text-transform:uppercase;
  67.             padding:5px 10px;
  68.         }
  69.         table tr td {
  70.             padding:5px 10px;
  71.         }
  72.         table tr:nth-child(odd){
  73.             background:#eee;
  74.         }        
  75.     </style>
  76.  
  77. </head>
  78. <body>
  79.     <div class="container">
  80.         <div class="jumbotron">
  81.            <h1> Jquery Ajax Filter</h1>
  82.         </div>
  83.     </div>
  84.     <div class="container">
  85.         <div class="col-md-8 col-md-offset-2">
  86.             <select id="filter">            
  87.                 <option value="all" name="" >All </option>
  88.                 <option value="intern"  >Intern</option>
  89.                 <option value="employee"  >employee</option>
  90.                 <option value="temp"  >temp</option>
  91.             </select>
  92.         </div>
  93.         <div class="col-md-8 col-md-offset-2" >
  94.             <?php //Empty table filled by JS above ?>
  95.             <table class="table table-striped" id="table">
  96.                 <thead id="thead">
  97.                 <tr>
  98.                     <th>ID</th>
  99.                     <th>First name</th>
  100.                     <th>Last name</th>
  101.                     <th>Type</th>
  102.                 </tr>
  103.                 </thead>
  104.                 <tbody id="tbody"></tbody>
  105.             </table>
  106.         </div>
  107.     </div>
  108. </body>
  109. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!