Event for the "X" in the input of the search box

marcpirat

I use datatable, server side page. I use a custom toolbar, added a checkbox.

If user type a value in the input, search is done, if it's remove value search is done.

But there is no search who are done when user click the x in the input box.

              var spgTable = $('#spgTable').DataTable({
                        dom : '<"spg-toolbars">frtip', 
                        language: {
                            url :  urlI18n
                        },
                        order:[
                                [0, 'desc']
                            ], //default first colum field sort
                        bLengthChange: false, //hide 'show entries dropdown
                        processing: true,
                        serverSide: true,
                        pagingType: 'simple_numbers',
                        ajax: {
                            type: 'get',
                            url: url,
                            data: function (d) {
                                var current = $('#spgTable').DataTable();
                                d.page = (current != undefined) ? current.page.info().page : 0;
                                d.size = (current != undefined) ? current.page.info().length : 5;
                                d.sort = d.columns[d.order[0].column].data + ',' + d.order[0].dir;
                                d.search=d.search.value;
                                d.testDoneInclude=$("#testDoneInclude").prop("checked");
                            }
                        },
                        //dom: 'Bfrtip',
                        buttons: [
                            {
                                text: '[(#{sampling.new})]', 
                                action: function (e, dt, node, config) {
                                    $("#spgFragment").load("/template/new/spg");
                                },
                                 init: function(api, node, config) {
                                    $(node).removeClass('btn-secondary');
                                    $(node).addClass('btn-primary');
                                }
                            }
                        ],

                        initComplete: function() {

                            var doneMsgText = [[#{testDoneInclude}]]; 
                            $("div.spg-toolbars").html("<div><input type='checkbox' id='testDoneInclude' name='testDoneInclude' class='form-check-input' /><label for='testDoneInclude' class='form-check-label'>" + doneMsgText + "</label></div>");

                            $("#testDoneInclude").on('change', function(){
                                spgTable.draw();
                            });

                            var $searchInput = $('div.dataTables_filter input');

                            $searchInput.unbind();

                            $searchInput.bind('keyup', function(e) {
                                if(this.value.length > 3 || this.value.length==0) {
                                    spgTable.search( this.value ).draw();
                                }
                            });
                        },

                        columns: [
                            {data: 'displayId'}, 
                            {data: 'buildDate'},
                            {data: 'productTypesName'},
                            {data: 'productsName'},
                            {data: 'machineName'}

                            /*[# sec:authorize="hasAnyRole('ROLE_ADMIN')"]*/
                            ,{data: null, orderable: false, defaultContent: ' <i class="fas fa-trash-alt delete"></i>'}
                            /*[/]*/

                        ],
                         rowCallback: function(row, data){
                            if(data.externalLaboratoryResults){
                                $(row).addClass('externalLaboratoryResults');
                            }
                        },
                        createdRow: function( row, data, dataIndex ) {

                            $( row ).find('td:eq(0)').attr('data-id', data.id);
                        }
                    });

Is there any event for that?

colin

Hi @marcpirat ,

The 'x' doesn't have a special event, but it would just call the search - see example here.

Cheers,

Colin