Individual Column Searching (Not Working)

Individual Column Searching (Not Working)

uppkACuppkAC Posts: 4Questions: 1Answers: 0

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>')
                    });
                });
            }
        });

Answers

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    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

  • uppkACuppkAC Posts: 4Questions: 1Answers: 0

    Oke , wait , i will try :smiley:

  • uppkACuppkAC Posts: 4Questions: 1Answers: 0

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

    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>')
                        });
                    });
                }
    
  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited January 2019

    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

  • uppkACuppkAC Posts: 4Questions: 1Answers: 0

    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

This discussion has been closed.