Colum search - no results found

Colum search - no results found

anthonyfrancqanthonyfrancq Posts: 5Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    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

  • anthonyfrancqanthonyfrancq Posts: 5Questions: 2Answers: 0
    edited September 2021

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • anthonyfrancqanthonyfrancq Posts: 5Questions: 2Answers: 0

    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>

  • anthonyfrancqanthonyfrancq Posts: 5Questions: 2Answers: 0

    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>
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

Sign In or Register to comment.