How to add column filtering with select inputs in Jquery datatables

Question

I want to add column filtering to my datatables as on this example but instead of search input I added select to each column.

I want to check the unique values of each column and append the values as options inside my select.

Basically what I did :

clone tr in theadand give it an id
foreach th I append a select
on initComplete i check unique values of each column liveTable.columns( k ).data().eq( 0 ).unique().sort()
loop through the unique array and add each item between option tag
append all the options inside my select

I am getting the error jquery.dataTables.min.js:30 Uncaught TypeError: Cannot read property 'sDefaultContent' of undefined

I commented my code so that you have a clear explanation. Any suggestions please what I am doing wrong ? Thank you very much.

Note : I know there is Individual column searching (select inputs) on datatables footer but I am interested in first example.

$(document).ready(function() {

// clone tr
$('#liveTable thead tr').clone(true).appendTo( '#liveTable thead' );
// set id to the cloned tr
$('#liveTable thead tr:eq(1)').attr('id', 'selectFilter');
// add select to each th in the cloned tr 
$('#liveTable thead tr:eq(1) th').each( function (i) {
 $(this).html( '<select class="added"><option value="">All</option></select>' ); 
 } );

    var liveTable = $('#liveTable').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "https://api.npoint.io/49da61bee945ca8aa32a",
    "columns": [
            {"data": "COUNTRY_NAME"},
            {"data": "COUNTRY_CODE"},
            {"data": "TERRITORY"},
            {"data": "MARKET"},
            {"data": "REGION"}, 
            {"data": "CustomerName"},
            {"data": "STATUS"},
            {"data": "OrderQty"},
            {"data": "Crncy"},
            {"data": "LocalPrice"},
            {"data": "Dollarprice"},
            {"data": "Europrice"},
            {"data": "Poundprice"}, 
            {"data": "ShipTo"}, 
            {"data": "ShipToName"}, 
            {"data": "ShipToHouseStreetNumber"}, 
            {"data": "ShipToCity"},
            {"data": "ShipToPostalCode"},
            {"data": "ShipToRegion"}, 
            {"data": "ShipToTelephone"}, 
            {"data": "ShipToEmail"}, 
            {"data": "ShipToCountry"}              
            ],
    
    
        "orderCellsTop": true,
    "scroller": true,
    "scrollY": 400,
    "scrollX": true,
    "scrollCollapse": true,
    "paging": false,
    "searching": false,

    initComplete: function () { 
    
    var k = 0;
    // loop through each select inside my cloned tr
    $('#selectFilter select').each(function() {  

    var selected = this;
    // get unique values in the current column
    var unique = liveTable.columns( k ).data().eq( 0 ).unique().sort();
        
    var option = '';
    // loop through unique array to add all items as options
    for (var i=0;i<unique.length;i++){
       option += '<option value="'+ unique[i] + '">' + unique[i] + '</option>';

    }
        // append all options inside current select
    $(selected).append(option);
    // increment k so that next select will check next column
    k++;

          });

        }        
} );


} );

thead select {
        width: 100%;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>


           <table id="liveTable" class="table table-bordered" style="width:100%">
            
        <thead>
            <tr>
            <th>COUNTRY_NAME</th>
            <th>COUNTRY_CODE</th>
            <th>TERRITORY</th>
            <th>MARKET</th>
            <th>REGION</th>
            <th>CustomerName</th>
            <th>STATUS</th>
            <th>OrderQty</th>
            <th>Crncy</th>
            <th>LocalPrice</th>
            <th>Dollarprice</th>
            <th>Europrice</th>
            <th>Poundprice</th>
            <th>Ship To</th>
            <th>Ship To Name</th>
            <th>Ship To House/ Street Number</th>
            <th>Ship To City</th>
            <th>Ship To Postal Code</th>
            <th>Ship To Region</th>
            <th>Ship To Telephone</th>
            <th>Ship To Email</th>
            <th>Ship To Country</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
           <th>COUNTRY_NAME</th>
            <th>COUNTRY_CODE</th>
            <th>TERRITORY</th>
            <th>MARKET</th>
            <th>REGION</th>
            <th>CustomerName</th>
            <th>STATUS</th>
            <th>OrderQty</th>
            <th>Crncy</th>
            <th>LocalPrice</th>
            <th>Dollarprice</th>
            <th>Europrice</th>
            <th>Poundprice</th>
            <th>Ship To</th>
            <th>Ship To Name</th>
            <th>Ship To House/ Street Number</th>
            <th>Ship To City</th>
            <th>Ship To Postal Code</th>
            <th>Ship To Region</th>
            <th>Ship To Telephone</th>
            <th>Ship To Email</th>
            <th>Ship To Country</th>

            </tr>
        </tfoot>
        
    </table>

DevTN · Accepted Answer · 2020-07-04 13:15:02Z

1

I found a solution, i hope this will helpful for someone in the future.

Replace $("tr:eq(1) th:eq(" + k + ") .added").append(option); with $(this).append(option);

answered Jul 4, 2020 at 13:15

DevTN

5972 gold badges14 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add column filtering with select inputs in Jquery datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related