Skip to content

Instantly share code, notes, and snippets.

@Neeraj1005
Last active February 27, 2021 05:45
Show Gist options
  • Save Neeraj1005/7379ab25d59cc94e010a13e3973b93b3 to your computer and use it in GitHub Desktop.
Save Neeraj1005/7379ab25d59cc94e010a13e3973b93b3 to your computer and use it in GitHub Desktop.

library used

https://datatables.net/

Disable search, paging, info and additional code is defined for filter option.

In your html add for filter

 <div class="btn-group dropdown keep-open float-right">
    <button type="button" class="btn btn-sm btn-outline-secondary dropdown-toggle" id="login"
        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="caret"><i class="fa fa-filter" aria-hidden="true"></i></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
        <form action="#" id="popForm" method="get" class="p-2">
            <div id="filtertable">
            </div>
        </form>
    </div>
</div>

Jquery Code

<script>
    $(document).ready(function () {
        $('#posttable').DataTable({
            "ordering": false,
            "paging": false,
            "info": false,
            "searching": false,
            initComplete: function () {
                this.api().columns([2, 3, 7]).every(function (
                d) { //THis is used for specific column
                    var column = this;
                    var theadname = $('#posttable th').eq([d]).text();
                    var select = $('<select class="form-control my-1"><option value="">' +
                            theadname + ': All</option></select>')
                        .appendTo('#filtertable')
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });
                    column.data().unique().sort().each(function (d, j) {
                        var val = $('<div/>').html(d).text();
                        select.append('<option value="' + val + '">' + val +
                            '</option>')
                    });

                });
            }
        });
    });

</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment