Colum search - no results found

anthonyfrancq

Link -- https://www.affwise.io/dashboard/reports/clicks

When ever I use either searches they always come up with no results found.

$(document).ready(function () {
    $('#reports tfoot th').each( function () {
        var title = $('#reports thead th').eq( $(this).index() ).text();
        $(this).html('<input type="text" class="form-control" placeholder="Search by '+title+'" />');
    });
    $('#reports').DataTable({
      "lengthChange": false,
      dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        initComplete: function () {
            // Apply the search
            this.api().columns().every( function () {
                var that = this;
                $('input', this.footer()).on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                } );
            } );
        }
  });
});

colin

Any search is also being applied to the final column, as it doesn't have a footer input cell, but the loop is considering it.

The easiest fix would be to change line 17 to be:

            this.api().columns([0,1,2,3,4,5,6]).every( function () {

Colin

anthonyfrancq

Hi Colin, that seems to correct the issue for the search inputs on the bottom, however it seems to break the 'Bfrtip' Search on the top right.

It appears the search input on the top right will only return results shown in the first column rather than searching all the columns.

colin

Can you update your site to use that code, please, so I can debug.

Colin

anthonyfrancq

So far a bit of playing around I came up with this, it seemed to work but it appears that if the table data it is searching for contains html, the input for the search on the top right will not return any data.

<script id="tablescript" type="text/javascript"> $(document).ready(function () { $('#reports tfoot th').each( function () { var title = $('#reports thead th').eq( $(this).index() ).text(); $(this).html('<input type="text" class="form-control" placeholder="Search by '+title+'" />'); }); $('#reports').DataTable({ "lengthChange": false, dom: 'Bfrtip', buttons: [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ], "columnDefs": [ { "type": "html", "targets": [0,1,2,3,4,5,6], "searchable": true } ], initComplete: function () { // Apply the search this.api().columns().every( function () { var that = this; $('input', this.footer()).on('keyup change clear', function () { if (that.search() !== this.value) { that .search(this.value) .draw(); } } ); } ); } }); }); </script>

anthonyfrancq

I was able to figure out the above issue, however when table data contains html in it the top right search will return no results.

<script id="tablescript" type="text/javascript">
$(document).ready(function () {
    $('#reports tfoot th').each( function () {
        var title = $('#reports thead th').eq( $(this).index() ).text();
        $(this).html('<input type="text" class="form-control" placeholder="Search by '+title+'" />');
    });
    $('#reports').DataTable({
      "lengthChange": false,
      dom: 'Bfrtip',
        buttons: [
            'copyHtml5',
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
        "columnDefs": 
        [
          { 
            "type": "html",
            "targets": [0,1,2,3,4,5,6], 
            "searchable": true
          }
        ],
        initComplete: function () {
            // Apply the search
            this.api().columns([0,1,2,3,4,5,6]).every( function () {
                var that = this;
                $('input', this.footer()).on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that
                            .search(this.value)
                            .draw();
                    }
                } );
            } );
        }
  });
});
</script>

colin

This was asked in a new thread, so I'll respond there. Your message were caught by the spam filter, so probably some confusion from that.

Colin