CODEWITHSUNDEEP
javascriptjqueryhtmldatatable
Azis
Azis

Reputation: 182

Add column name and select box in datatable table head

I have a datatable and I altered the table to have some column tableheads have select boxes on them to filter the data of the table.

My HTML

<table id="dataTableInventory" class="table table-striped table-bordered data-table-drafts" style="width:100%">
    <thead>
        <tr>
            <th class="filterhead" style="display: none;">Item ID</th>
            <th class="filterhead">Main Category</th>
            <th class="filterhead">Sub Category</th>
            <th>Item Name</th>
            <th>Item Count</th>
            <th>In Stock</th>
            <th>Out Stock</th>
            <th>Action</th>
        </tr>
    </thead>
    <tfoot>
    </tfoot>
    <tbody id="table-body">
        <?php foreach($param_items as $item){?>
            <tr>
                <td class="id" style="display: none;"><?php echo $item->idx;?></td>
                <td><?php echo $item->main_category;?></td>
                <td><?php echo $item->sub_category;?></td>
                <td><?php echo $item->item_name;?></td>
                <td><?php echo $item->item_count;?></td>
                <td><?php echo $item->in_stock;?></td>
                <td><?php echo $item->out_stock;?></td>
                <td align="center"><a href="<?php echo base_url('dashboard/staff/inventory/view_item/'.$item->idx);?>" class="btn waves-effect waves-light btn-primary view-button"><i class="fa fa-eye"></i></a> <!-----------------------><a href="<?php echo base_url('dashboard/staff/inventory/in_item/'.$item->idx);?>" class="btn waves-effect waves-light btn-info in-button"><i class="fa fa-plus"></i></a> <!-----------------------><a href="<?php echo base_url('dashboard/staff/inventory/out_item/'.$item->idx);?>" class="btn waves-effect waves-light btn-warning out-button"><i class="fa fa-minus"></i></a> <!-----------------------><button type="button" class="btn waves-effect waves-light btn-danger delete-button" data-url="<?php echo base_url('dashboard/staff/inventory/delete');?>"><i class="fa fa-trash-o"></i></button></td>
            </tr>
        <?php }?>
    </tbody>

</table>

My JS

var table = $('#dataTableInventory').DataTable();
$(".filterhead").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this).empty() )
        .on( 'change', function () {
           var term = $(this).val();
            table.column( i ).search(term, false, false ).draw();
        });
        table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    });
});

The problem is it doesnt just append the select box but it erases the tablehead names. It only shows the select box and the tablehead names are no longer there.

enter image description here

How do I do this to show the column tablehead name and also the select box?

Upvotes: 0

Views: 700

Answers (2)

Paras
Paras

Reputation: 147

Try this:

var table = $('#dataTableInventory').DataTable();
$(".filterhead").each( function ( i ) {
    var select = $('<select><option value=""></option></select>')
        .appendTo( $(this) )
        .on( 'change', function () {
           var term = $(this).val();
            table.column( i ).search(term, false, false ).draw();
        });
        table.column( i ).data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
    });
});

everything is okey in your code except you are emptying the column you are appending to. I just removed the .empty() method.

http://jsfiddle.net/hs2gbm3k/7/

Upvotes: 2

alimbaronia
alimbaronia

Reputation: 504

Can you do:

...
var select = $($(this).text() + '<select><option value=""></option></select>')

Or you can:

...
.appendTo( $(this) )

Instead of:

...
.appendTo( $(this).empty() )

Upvotes: 1

Related Questions