-->
Home
Blogger
CSS Code

Table multiple filter HTML CSS Java Script Source Code

Column Wise Filter in HTML Table 

ब्लॉग में HTML CSS और Java Script Code के माध्यम से Multiple Filter या Column Wise Table Filter के Source Code एवं Demo नीचे दिया गया है 

Table multiple filter HTML CSS Java Script Source Code

Column wise Filter Table CSS Code 



#example {

  border-collapse: collapse;
  width: 100%;
 
}
#cellpadding {
border-collapse: collapse;
  width: 100%;
}

#cellpadding  th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align:center;
  background-color: #2d66b7;
  color: white;
 font-size:1vw;
}
.dataTables_wrapper {
  text-align:center;
  background-color: #fff;
  color: white;
 font-size:1vw;
}
 
#example td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  color:#000;
}
#filter_global td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  
  
}
#filter_col3  td {
 border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }

#filter_col1 td{
border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }
#filter_col2 td{
border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }

#filter_col4 td{
border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }
  #filter_col5 td{
border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }
   #filter_col5 td{
border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }
  #filter_col6 td{
border: 1px solid #ddd;
  padding: 8px;
  text-align:center;
  font-size:1vw;
  }
#example tr:nth-child(even){background-color: #eee;}



#example  th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align:center;
  background-color: #2d66b7;
  color: white;
 font-size:1vw;
}

Column wise Filter Table HTML Code 




<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.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>
<table cellpadding="3" id="cellpadding" >
        
            <tr>
                <th>Target</th>
                <th>Search text</th>
                <th>Treat as regex</th>
                <th>Use smart search</th>
            </tr>
        </thead>
        <tbody>
            <tr id="filter_global">
                <td>Global search</td>
                <td align="center"><input type="text" class="global_filter" id="global_filter"></td>
                <td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
                <td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col1" data-column="0">
                <td>Block Name</td>
                <td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
            </tr>
            <tr id="filter_col2" data-column="1">
                <td>Village Name</td>
                <td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
                <td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
            </tr>
 
           
        </tbody>
    </table>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Block Name</th>
                <th>Village Name</th>
                <th>Total House Hold</th>
                <th>Population</th>
                <th>SC</th>
                <th>ST</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Achhnera</td>
<td>Achhnera</td>
<td>28332</td>
<td>179687</td>
<td>33587</td>
<td>135</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Hansela</td>
<td>736</td>
<td>4359</td>
<td>973</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Tirpuri</td>
<td>68</td>
<td>455</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Gobra</td>
<td>333</td>
<td>2321</td>
<td>199</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Bhandiri</td>
<td>124</td>
<td>869</td>
<td>61</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Garhima</td>
<td>344</td>
<td>2092</td>
<td>345</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Sandhan</td>
<td>1288</td>
<td>8658</td>
<td>663</td>
<td>4</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Khera Sadhan</td>
<td>349</td>
<td>2115</td>
<td>456</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Basaia Rajput</td>
<td>236</td>
<td>1402</td>
<td>55</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Fatehpura</td>
<td>338</td>
<td>2086</td>
<td>19</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Rampur</td>
<td>59</td>
<td>345</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Babrod</td>
<td>326</td>
<td>2109</td>
<td>1289</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mubarikpur</td>
<td>298</td>
<td>1972</td>
<td>390</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Anganpur</td>
<td>198</td>
<td>1324</td>
<td>119</td>
<td>106</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Kachaura</td>
<td>1013</td>
<td>6505</td>
<td>1234</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Bastai</td>
<td>287</td>
<td>1748</td>
<td>538</td>
<td>18</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Nanau</td>
<td>130</td>
<td>792</td>
<td>85</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mai</td>
<td>404</td>
<td>2674</td>
<td>94</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Kasoti</td>
<td>130</td>
<td>743</td>
<td>186</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Kitham</td>
<td>567</td>
<td>3241</td>
<td>1061</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Singma</td>
<td>513</td>
<td>3084</td>
<td>589</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Jugsana</td>
<td>93</td>
<td>589</td>
<td>41</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Chauma Farah</td>
<td>87</td>
<td>486</td>
<td>9</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Arsena</td>
<td>540</td>
<td>4396</td>
<td>299</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mangarol Gujar</td>
<td>493</td>
<td>2816</td>
<td>134</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Akabara</td>
<td>651</td>
<td>4149</td>
<td>418</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Loh Karera</td>
<td>496</td>
<td>3316</td>
<td>345</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Panwari</td>
<td>899</td>
<td>5684</td>
<td>769</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Raipura Ahir</td>
<td>335</td>
<td>2190</td>
<td>313</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Muranda</td>
<td>393</td>
<td>2593</td>
<td>285</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Bhilawati</td>
<td>308</td>
<td>1978</td>
<td>579</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Kathawari</td>
<td>360</td>
<td>2303</td>
<td>350</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Kukathala</td>
<td>654</td>
<td>4152</td>
<td>491</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Kharbai</td>
<td>366</td>
<td>2523</td>
<td>2</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Nagar</td>
<td>672</td>
<td>4188</td>
<td>306</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Atus</td>
<td>730</td>
<td>4465</td>
<td>103</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Janutha</td>
<td>477</td>
<td>3166</td>
<td>296</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mangura</td>
<td>529</td>
<td>3447</td>
<td>1248</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Raibha</td>
<td>2425</td>
<td>14317</td>
<td>2015</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Thapi</td>
<td>120</td>
<td>765</td>
<td>69</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Sehta</td>
<td>176</td>
<td>1099</td>
<td>161</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Sahri</td>
<td>526</td>
<td>3605</td>
<td>965</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Rasulpur Sadar</td>
<td>150</td>
<td>966</td>
<td>204</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Sakatpur</td>
<td>343</td>
<td>2308</td>
<td>283</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Pali Sadar</td>
<td>91</td>
<td>585</td>
<td>139</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Jakha</td>
<td>101</td>
<td>717</td>
<td>5</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mahuar</td>
<td>683</td>
<td>4246</td>
<td>1494</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Jharoti</td>
<td>184</td>
<td>1219</td>
<td>20</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Turkia</td>
<td>133</td>
<td>888</td>
<td>40</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mangaroli Jat</td>
<td>675</td>
<td>4193</td>
<td>1607</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Chha Pokhar</td>
<td>564</td>
<td>3577</td>
<td>812</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Arrua Khas</td>
<td>425</td>
<td>2811</td>
<td>868</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Nagla Arua</td>
<td>319</td>
<td>2249</td>
<td>414</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Biara</td>
<td>667</td>
<td>4244</td>
<td>864</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Gadi Candarman</td>
<td>359</td>
<td>2228</td>
<td>666</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Ardaya</td>
<td>986</td>
<td>5870</td>
<td>2285</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Dhanoli</td>
<td>314</td>
<td>1963</td>
<td>1105</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Gopau</td>
<td>919</td>
<td>5990</td>
<td>356</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Puramana</td>
<td>579</td>
<td>3545</td>
<td>1347</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Bidhapur</td>
<td>357</td>
<td>2036</td>
<td>1035</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Abhaudopura</td>
<td>698</td>
<td>4362</td>
<td>1489</td>
<td>1</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Mori</td>
<td>90</td>
<td>623</td>
<td>8</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Barauli</td>
<td>269</td>
<td>1749</td>
<td>270</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Gurha</td>
<td>108</td>
<td>662</td>
<td>188</td>
<td>0</td>
</tr>
<tr>
<td>Achhnera</td>
<td>Khera Bakanda</td>
<td>247</td>
<td>1535</td>
<td>534</td>
<td>0</td>
</tr>
</tbody>
</table>

Column wise Filter Table Java Script Code 


  function filterGlobal () {
    $('#example').DataTable().search(
        $('#global_filter').val(),
        $('#global_regex').prop('checked'),
        $('#global_smart').prop('checked')
    ).draw();
}
 
function filterColumn ( i ) {
    $('#example').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),
        $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}
 
$(document).ready(function() {
    $('#example').DataTable();
 
    $('input.global_filter').on( 'keyup click', function () {
        filterGlobal();
    } );
 
    $('input.column_filter').on( 'keyup click', function () {
        filterColumn( $(this).parents('tr').attr('data-column') );
    } );
} );

Edit and Copy Column wise Filter Source Code

Result

Table multiple filter Demo

Post a Comment