I'm using a JavaScript table goodies-pack from DataTables and I've e across a feature that greatly fits to my need, the individual column searching (select inputs), found here.

This feature allows to drill-down on the column data, filtering it down.

I've tried the standard implementation with no luck. I find no specific field on the implementation and have tried removing all other properties.

My code is:

<script type="text/javascript">
    $(document).ready(function() {
        $('#alertLogTable').DataTable( {
            language: {
                url: '//cdn.datatables/plug-ins/1.10.11/i18n/Portuguese-Brasil.json'
            },
            responsive: true,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .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 ) {
                   select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                } );
            }
        });
    });
</script>

The demo on the datatables page shows buttons beneath each column to filter it. I don't get those and the filtering feature. What am I missing here?

I'm using a JavaScript table goodies-pack from DataTables and I've e across a feature that greatly fits to my need, the individual column searching (select inputs), found here.

This feature allows to drill-down on the column data, filtering it down.

I've tried the standard implementation with no luck. I find no specific field on the implementation and have tried removing all other properties.

My code is:

<script type="text/javascript">
    $(document).ready(function() {
        $('#alertLogTable').DataTable( {
            language: {
                url: '//cdn.datatables/plug-ins/1.10.11/i18n/Portuguese-Brasil.json'
            },
            responsive: true,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .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 ) {
                   select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                } );
            }
        });
    });
</script>

The demo on the datatables page shows buttons beneath each column to filter it. I don't get those and the filtering feature. What am I missing here?

• javascript
• jquery
• datatable
• datatables

• What isn't working? – Brian Kates Commented Aug 8, 2016 at 18:17
• @CMedina, I may have made my self unclear on what's not working. Apologies. I'll edit the question, but the demo on the page shows buttons beneath each column to filter it. – gtludwig Commented Aug 8, 2016 at 18:26
• What do you see in the console? Any error messages on search word? – Lucky Commented Aug 8, 2016 at 18:31
• Firebug console shows no problems or errors, all other dataTable features work nicely. – gtludwig Commented Aug 8, 2016 at 18:46

2 Answers 2

Your code works fine. I am 100% certain that you just have forgotten to include a <tfoot> section. The footer is not added by magic, if <tfoot> is not present your <select>'s is inserted to nothing. So remember :

<table>
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
    <tr><td></td></tr>
  </tbody>
  <tfoot>
    <tr><th></th></tr>
  </tfoot>
</table>

This is my ajax side code I have an issue when I select the dropdown option the records are not filtering it only shows me processing. when I remove the serverside: true it works perfectly but my records show mi very slow. Any one has solution in this dropdown serchfilter.

$("#ajaxTable").DataTable({
  bPaginate: true,
  bProcessing: true,
  bDestroy: true,
  serverSide: true,
  searching: true,
  order: [],
  //"ordering": true,
  //"columnDefs": [{ orderable: false, targets: [5] }],
  pageLength: 25,
  //"deferRender":    true,
  ajax: {
    url: "",
    type: "POST",
    data: {},
    error: function (html) {},
    beforeSend: function () {
      //$('#image').show();
    },
    plete: function (data) {
      //let obj = JSON.parse(data);
      //console.log(data['responseJSON'].recordsTotal);
    },
  },
  columns: [
    { data: "srno" },
    { data: "id" },
    { data: "date" },
    { data: "ref" },
    { data: "pname" },
    { data: "regional_manager" },
    { data: "al_backend" },
    { data: "area_manager" },
    { data: "territory_manager" },
    { data: "customer_name" },
    { data: "mobile_no" },
    { data: "modified_date" },
    { data: "status" },
    { data: "action" },
    { data: "edit" },
    { data: "remark" },
    { data: "lead_remark" },
    { data: "gender" },
    { data: "currentlocation" },
    { data: "employ_type" },
    { data: "damount" },
    { data: "nooldcard" },
    { data: "rcbook" },
    { data: "model" },
    { data: "disbursed_amount" },
    { data: "disbursed_date" },
    { data: "disbursed_bank" },
    { data: "sanction_amount" },
    { data: "sanction_date" },
    { data: "sanction_bank" },
    { data: "pan_card" },
    { data: "aadhar_card" },
    { data: "bank_state" },
    { data: "salary_slip" },
    { data: "rc_card" },
    { data: "zip" },
  ],
  language: {
    searchPlaceholder: "Search...",
    search: "",
    lengthMenu: "_MENU_ items/page",
    infoFiltered: "",
    processing:
      "<img src='' style='position: absolute;top: 50%;left: 50%;margin: -100px 0px 0px -50px;' />",
  },
  dom: "Blfrtip",
  buttons: [
    {
      extend: "excel",
    },
  ],
  initComplete: function () {
    this.api()
      .columns([4])
      .every(function () {
        var column = this;
        var select = $('<br><select><option value="">ALL</option></select>')
          .appendTo($(column.header()))
          .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) {
            select.append('<option value="' + d + '">' + d + "</option>");
          });
      });
  },
});