Individual Column Searching (Not Working)

uppkAC

Help me to resolve this problem. Individual Column Search not work for me

var table = $("#table_unit").DataTable({

            processing: true,
            serverSide: true,
            ajax: {"url": "dataunit/get_data_json", "type": "POST"},
            columns: [
                  {"data": "unit_id"},
                  {"data": "unit_nama"},
                  {"data": "unit_kode"},
                  {"data": "unit_induk"},
                  {"data": "aksi"},
                  //{"data": "aksi"}
            ],
            order: [[1, 'asc']],
            //language: {"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Indonesian.json"},
            //Penomoran Baris
            columnDefs: 
            [
            {
                targets : 0,
                orderable : false,
                render : function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                targets : 4,
                orderable : false,
            }
            ],

            dom: '<"datatable-header"flB><"datatable-scroll-wrap"t><"datatable-footer"ip>',
            buttons: {            
                dom: {
                    button: {
                        className: 'btn btn-light'
                    }
                },
                buttons: [
                    'copyHtml5',
                    'excelHtml5',
                    'csvHtml5',
                    'pdfHtml5',
                    {
                        extend: 'print',
                        text: '<i class="icon-printer mr-2"></i> Print table',
                        className: 'btn btn-light'
                    }
                ]
            },
            initComplete: function () {
                this.api().columns().every(function() {
                    var column = this;
                    var select = $('<select class="form-control filter-select" data-placeholder="Filter"><option value=""></option></select>')
                        .appendTo($(column.footer()).not(':last-child').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.replace(/<(?:.|\n)*?>/gm, '')+'">'+d.replace(/<(?:.|\n)*?>/gm, '')+'</option>')
                    });
                });
            }
        });

kthorngren

There are two possible problems I see because you are using server side processing. This is meant to be a client side search mechanism.

1. The select options are built from the data in the client which is the page being displayed.
2. The search is a regex search. The Search string will have ^ prepended and $ appended to the search string. Your server script will need to support regex searching or you need to change the search from .search( val ? '^'+val+'$' : '', true, false ) to .search( val ) to just search for the value.

Kevin

uppkAC

Oke , wait , i will try

uppkAC

I have change .search( val ? '^'+val+'$' : '', true, false ) to .search( val ) but not working

Like this

initComplete: function () {
                this.api().columns().every(function() {
                    var column = this;
                    var select = $('<select class="form-control select2" data-placeholder="Filter"><option value=""></option></select>')
                        .appendTo($(column.footer()).not(':last-child').empty())
                        .on('change', function() {
                            var val = $(this).val();
     
                            column
                                .search(val)
                                .draw();
                        });
     
                    column.data().unique().sort().each(function (d, j) {
                        select.append('<option value="'+d.replace(/<(?:.|\n)*?>/gm, '')+'">'+d.replace(/<(?:.|\n)*?>/gm, '')+'</option>')
                    });
                });
            }

kthorngren

Since you have server side processing enabled your server script is responsible for performing the search. What are you using for your server script?

Is your server script setup to support column searching?

Here is an example of using the select search with server side processing:
http://live.datatables.net/yehugedi/1/edit

Not all the options are available, only those in the client. Try selecting one of the office locations.

Kevin

uppkAC

i use PHP script like this

function get_all_data() { //ambil data barang dari table barang yang akan di generate ke datatable
        $this->datatables->select('
          unit_id ,
          unit_kode ,
          unit_nama ,
          unit_induk
          ');
        $this->datatables->from('unit');

        $this->datatables->add_column('aksi',
        '
          <button type="button" class="btn btn-outline bg-primary border-primary text-primary-800 btn-icon edit_data" data-id="$1" data-kode="$2" data-nama="$3" data-induk="$4" data-popup="tooltip" title="Edit"><i class="icon-pencil7"></i></button>

          <button type="button" class="btn btn-outline bg-danger border-danger text-danger-800 btn-icon hapus_data" data-id="$1" title="Hapus"><i class="icon-eraser"></i></button>
        ',
        'unit_id , unit_nama, unit_kode, unit_induk'
        );
        return $this->datatables->generate();
  }

i think this script not support column searching, maybe