Search Builder special character savestate issue

sanalrenk

hello,
I am successfully filtering with the custom search builder as below.

When I refresh the page, the savestate does not seem to work, the results are not kept.
This problem does not occur when I do not use non-special characters.

My codes:

` $(document).ready(function () {
var benimTablom = $('#tablom').DataTable({

            //aktif deaktif edilecek kolonları seçer
            layout: {
                bottomStart: {
                    buttons: [
                        {
                            extend: 'copyHtml5',
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            orientation: 'landscape',//yatay dikey
                            pageSize: 'A4', //kağıt formatı
                            alignment: "center", //hizalama
                            titleAttr: 'PDF',   //buton adı
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                            }
                        },
                        {
                            extend: 'csvHtml5',
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6, 7, 8, 9]
                            }
                        },
                    ]
                },
                top: {
                    buttons: [
                        {
                            extend: 'colvis',
                            columns: ':eq(1),:eq(2),:eq(2),:eq(3),:eq(4),:eq(5),:eq(6),:eq(7),:eq(8),:eq(9)', 
                            collectionLayout: 'fixed columns',
                            popoverTitle: 'Kolonlar'
                        }
                    ],
                },
                top1: {
                    searchBuilder: {
                        columns: ':not(.no-sb)',
                        conditions: {
                            num: {
                                MultipleOf: {
                                    conditionName: 'Multiple Of',
                                    init: function (that, fn, preDefined = null) {
                                        var el = document.createElement('input');
                                        el.addEventListener('input', function () {
                                            fn(that, this);
                                        });
                                        if (preDefined !== null) {
                                            el.value = preDefined[0];
                                        }

                                        return el;
                                    },
                                    inputValue: function (el) {
                                        return el[0].value;
                                    },
                                    isInputValid: function (el, that) {
                                        return el[0].value.length !== 0;
                                    },
                                    search: function (value, comparison) {
                                        return value % comparison === 0;
                                    }
                                }
                            }
                        }

                    }
                }

            },

            stateSave: true,
            colReorder: {
                columns: ':not(:first-child, :last-child)' //ilk ve son kolonun surukle islevini durdurur
            },
            responsive: true,
            AutoWidth: false,
            searchHighlight: true,
            //paging: false,  sayfalamayi kontrol eder
            //scrollY: '200px', // tablonun yatay yuksekligi
            stateSaveCallback: function (settings, data) {
                localStorage.setItem(
                    'DataTables_' + settings.sInstance,
                    JSON.stringify(data)
                );
            },
            stateLoadCallback: function (settings) {
                return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance));
            },

            "pageLength": 10, // varsayilan olarak gosterilecek kayit
            columns: [
                {title: "Id", "data": "iD", defaultContent: '', "visible": false},
                {title: "No", "data": "no", "width": "0%"},
                {title: "Ürün", "data": "urun", "width": "10%"},
                {title: "Ek Bilgi", "data": "ekbilgi", "width": "90%"},
                {title: "Kategori", "data": "kategori", "width": "1%"},
                {title: "Alt Kategori", "data": "kategori2", "width": "10%"},
                {title: "Üretici", "data": "uretici", "width": "10%"},
                {title: "Tedarikçi", "data": "tedarikci", "width": "10%"},
                //{title: "Paket", "data": "paket", "width": "1%"},
                {title: "Lokasyon", "data": "lokasyon", "width": "10%"},
                {title: "Adet", "data": "adet", "width": "0%"},
                {title: "İşlemler", "data": "iD", "width": "0%"}


            ],
            columnDefs: [
                {targets: [0, 1, 10], className: 'no-sb'},
                {searchable: false, targets: [9, 10]},
                {
                    targets: [0],
                    className: 'noVis'
                },

                {targets: [0, 1, 9], searchable: false}, // arama yapilmamasini istedigimiz kolanlar
                {"bSortable": false, "aTargets": [0, 1, 8, 9]}, // siralama olmamasini istedigimiz hucre 1, 3, 5 vs gibi
                {"targets": 0, "data": 'iD'},
                {"targets": 1, "data": 'no'},
                {"targets": 2, "data": 'urun'},
                {"targets": 3, "data": 'ekbilgi'},
                {"targets": 4, "data": 'kategori'},
                {"targets": 5, "data": 'kategori2'},
                {"targets": 6, "data": 'uretici'},
                {"targets": 7, "data": 'tedarikci'},
                //{"targets": 7, "data": 'paket'},
                {"targets": 8, "data": 'lokasyon'},
                {"targets": 9, "data": 'adet'},

                {
                    "targets": [10],
                    "data": 'iD',
                    "render": function (data) {
                        return '<div class="btn-group"><a href="index.php?sayfa=KomponentDetay&KomponentDetayID=' + data + '"> <button class="btn btn-sm btn-secondary mx-1 DetayBTN" id=' + data + '><i class="fa fa-eye"></i></button></a> <a href="index.php?sayfa=KomponentDuzenle&KomponentDuzenleID=' + data + '"> <button class="btn btn-sm btn-primary mx-1 duzenleBTN" id=' + data + '><i class="fa fa-pencil"></i></button></a> <button class="btn btn-sm btn-danger mx-1 KomsilBTN" id=' + data + '><i class="fa fa-trash-can"></button></div>'
                    },
                },
                {
                    targets: [0, 1, 8, 9, 10],
                    className: 'search-hilite',
                },


            ],
            order: [[0, '']],
            language: {
                sInfoEmpty: '',
                info: 'Sayfa : _PAGE_ / _PAGES_',
                infoEmpty: 'Kayit bulunamadi',
                infoFiltered: '(_MAX_ kayıt icinden arandi)',
                lengthMenu: '_MENU_ &nbsp;&nbsp; göster',
                zeroRecords: 'Aramada kayit bulunamadi',
                sSearch: 'Ara:',
                sEmptyTable: 'Veritabaninda kayit bulunamadi',
            },
        });

        benimTablom.on('draw', function () {
            var body = $('.search-hilite', benimTablom.table().body());

            body.unhighlight();
            // body.highlight(benimTablom.search());
        });

        /*
        buildSelect(benimTablom);
        benimTablom.on('draw', function () {
            buildSelect(benimTablom);
        });*/
        // no tablo sutununa sıra no eklesın
        benimTablom.on('order.dt search.dt', function () {
            let i = 1;

            benimTablom.cells(null, 1, {search: 'applied', order: 'applied'}).every(function (cell) {
                this.data(i++);
            });
        }).draw();
    });`

kthorngren

I built a simple test case for you:
https://live.datatables.net/miwalufa/1/edit

Searching for Edinburgh > tag does work but when reloading the page (click the Run with JS button) the value isn't restored. In the console output you can see the value is saved but something in the restoration process doesn't work. @allan will need to take a look.

Kevin

sanalrenk

Thanks Kevin.
I hope the problem will be solved.