Column Dropdown First Value shows empty record

HussainAbdulMajeed

I have implemented a table header column dropdown for filtering records in my mvc project and it seems fine until i click on the first option of the dropdown it shows that there is no record even though there are records. The other options do show me the intended record results. What could be the problem?

Below is the code....

                $(document).ready(function () {
                   
                   //Truncate text of the field
                    $.fn.dataTable.render.ellipsis = function () {
                        return function (data, type, row) {
                            return type === 'display' && data.length > 10 ?
                                data.substr(0, 60) + '…' :
                                data;
                        }
                    };

                    var table_obj = $('#NewTicket').dataTable({

                        "language": {
                            "sZeroRecords": 'لا توجد سجلات مطابقة',
                            "sEmptyTable": 'لا توجد البيانات',
                            "search": "_INPUT_",
                            "searchPlaceholder": "ابحث هنا...",
                            "oPaginate": {
                                "sNext": '',
                                "sPrevious": '',
                            }
                        },
                        "responsive": true,
                        "scrollX": true,
                        "aLengthMenu": [[10, 15 - 1], [10, 15, "All"]],
                        "order": [0, 'desc'],
                        "iDisplayLength": 10,
                        "columnDefs": [{
                            "className": "dt-right",
                            "targets": "_all" 
                        }],
                        "columnDefs": [{
                            "targets": 3, 
                            "render": $.fn.dataTable.render.ellipsis()
                        }],
                        
                       //Column dropdown for filtering
                        initComplete: function () {
                            this.api().columns([1]).every(function () {
                                var column = this;
                                var select = $('قسم الطلب')
                                    .appendTo($(column.header()).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) {
                                    var val = $('').html(d).text();
                                    select.append('' + val + '');

                                });
                            });
                        }


                    });

                    table_obj.find("th").off("click.DT");

                })
            

colin

Hi @HussainAbdulMajeed ,

This example here is very similar to yours - you're constructing the dropdown differently, and you're doing a regular expression search. It looks like you may not be creating the select element correctly, so it would be worth comparing the two sets of code. Also, this example here, escapeRegex is very similar to, so another one to compare against.

CHeers,

Colin

HussainAbdulMajeed

Hello @colin

I finally was able to solve the problem. The issue was within the Arabic string value inserted in the database, as it had an empty space at the beginning during its insertion. Therefore the data table wasn't able to read.

Thanks a lot for replying,
Cheers,

Hussain