DataTables issue with Mark.js plugin in Koolreport 5.5

Ahmed Bucheeri commented on Jan 26, 2022

I have the following view Code

  <?php
        echo '<h2 class="text-center">Customers List</h2>';
        echo '<div class="text-end">
                <button type="button" class= "addcustomerbtn btn btn-primary bi bi-plus m-1" data-bs-toggle="tooltip" title="Add Customer">
                  Add Customer
                </button>
            </div>';
        DataTables::create(array(
          "dataSource" => $this->dataStore("customerslist"),
          "name" => "customerTable",
          "themeBase"=>"bs4",
          "options"=>array(
            "fastRender" => true,
            "searching" => true,
            "searchOnEnter" => true,
            "paging" => true,
            "mark" => true,
            "order" => array(1,"asc"),
            "lengthMenu" => [[15, 30, 50, 100, -1], [15, 30, 50, 100, "All"]],
            "columnDefs" => $excluded_columns,
          ),
          "columns"=>array(
            "engine"=>array(
              "label" => "",
              "className" => "text-center",
              "searchable" => false,
              "orderable" => false,
            ),
            "CustomerName"=>array(
              "label" => "Customer Name",
            ),
            "Code"=>array(
              "label" => "Code",
              "className" => "text-center"
            ),
            "logo"=>array(
              "label" => "Logo File Name",
              "className" => "text-center",
              "searchable" => false,
              "orderable" => false,
            ),
            "editicon"=>array(
              "label" => "",
              "className" => "text-center",
              "searchable" => false,
              "orderable" => false,
            ),
            "deleteicon"=>array(
              "label" => "",
              "className" => "text-center",
              "searchable" => false,
              "orderable" => false,
            ),
          ),
          "cssClass"=>array(
            "table" => "table table-bordered table-striped align-middle small",
            "th" => "cssHeader"
          )
        ));
      ?>

I have enabled mark text while is searching. When I run the code with Koolreport 5.0.1, it works fine. (search and highlight or mark text), but when I run with koolreport 5.5 (5.9), it searches for text only but i does not highlight or mark the text

Ahmed Bucheeri commented on Jan 26, 2022

I am loading the below scripts <link href="/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="/assets/bootstrap/icons/bootstrap-icons.css"> <link rel="stylesheet" href="/assets/css/datatables.mark.min.css"> <link rel="stylesheet" type="text/css" href="/css/style.css" />

Sebastian Morales commented on Jan 26, 2022

I think this is a feature of DataTables' Mark plugin. We will find a way to you to load any plugin so that you can load Mark and enable its search highlight feature. Rgds,

Ahmed Bucheeri commented on Jan 26, 2022

Thanks, I will be waiting for your response

Sebastian Morales commented on Jan 27, 2022

Pls try this code and let us know the result:

//MyReport.view.php
        <script>
            function loadJS(src)
            {
                var script = document.createElement('script');
                script.src = src;
                document.head.appendChild(script);
            }

            function loadCSS(href)
            {
                var link = document.createElement('link');
                link.rel  = 'stylesheet';
                link.type = 'text/css';
                link.href = href;
                document.head.appendChild(link);
            }
        </script> 
<?php
        DataTables::create(array(
            ...
                "onReady" => "function() {

                    loadJS(\"https://cdn.jsdelivr.net/g/mark.js\"); // replace this with your url
                    loadJS(\"https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js\"); // replace this with your url
                    loadCSS(\"https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css\"); // replace this with your url
                }",

Ahmed Bucheeri commented on Jan 27, 2022

Hi in datagrid\DataTables\KRDataTables.js, I have commented the below then the search highlight works fine

// if (KRdt.searchOnEnter || KRdt.serverSide) { // $('#' + id + '_filter input') // .unbind() // .bind('keydown', function (e) { // if (e.keyCode != 13) return; // e.preventDefault(); //prevent form submit with enter input // // if not "serverSide" use regex search // if (!KRdt.serverSide) { // var value = hasSearchMode('exact') ? // this.value : $.fn.dataTable.util.escapeRegex(this.value); // searchRegex = strToRegexStr(value); // jQdt.search(searchRegex, true, false).draw(); // } else // if "serverSide" use normal search // { // jQdt.search(this.value).draw(); // } // }); // } // // // only search on input if not "serverSide" // if (!KRdt.searchOnEnter && !KRdt.serverSide) { // $('#' + id + '_filter input') // .unbind() // .bind('input', function (e) { // var value = $.fn.dataTable.util.escapeRegex(this.value); // searchRegex = strToRegexStr(value); // jQdt.search(searchRegex, true, false).draw(); // }); // }

Please advise

Ahmed Bucheeri commented on Jan 27, 2022

Did you check my comment in commenting some lines in datagrid\DataTables\KRDataTables.js

Ahmed Bucheeri commented on Jan 27, 2022

Tried DataTables::create(array(

      "dataSource" => $this->dataStore("customerslist"),
      "name" => "customerTable",
      "themeBase"=>"bs4",
      "onReady" => "function() {
          loadJS(\"https://cdn.jsdelivr.net/g/mark.js\"); // replace this with your url
          loadJS(\"https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.js\"); // replace this with your url
          loadCSS(\"https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css\"); // replace this with your url
      }",
      "options"=>array(
        "fastRender" => true,
        "searching" => true,
        "paging" => true,
        "mark" => true,
        "order" => array(1,"asc"),
        "lengthMenu" => [[15, 30, 50, 100, -1], [15, 30, 50, 100, "All"]],
        "columnDefs" => $excluded_columns,
      ),

I did not work,

Sebastian Morales commented on Jan 28, 2022

Ok, thanks for your feedback about KRDataTables.js. It seems we unbind the keydown event of search input, which is needed for mark.js plugin to work. We will find a solution for this issue and let you know. Tks,

Ahmed Bucheeri commented on Jan 28, 2022

Thanks

Sebastian Morales commented on Jan 28, 2022

Pls try to comment out only the .unbind() line and see if it works for you:

            $('#' + id + '_filter input')
                // .unbind() // only comment this line
                .bind('keydown', function (e) {
            ...
            $('#' + id + '_filter input')
                // .unbind() // only comment this line
                .bind('input', function (e) {

Sebastian Morales commented on Jan 28, 2022

I found that in contrast to most other plugins mark.js plugin can not be loaded after DataTables. So pls remove the loadJS calls in "onReady":

    "onReady" => "function() {
        // loadJS(...)
        // loadJS(...)
    }",

Instead just include your script src tag before DataTables::create:

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/plug-ins/1.10.13/features/mark.js/datatables.mark.min.css">
        <script src="https://cdn.jsdelivr.net/mark.js/8.6.0/jquery.mark.min.js"></script> 
        <script src="https://cdn.jsdelivr.net/datatables.mark.js/2.0.0/datatables.mark.min.js"></script> 
        <?php
            DataTables::create(array(
                ...

Also comment out the second .unbind() command in KRDataTables.js file.

Ahmed Bucheeri commented on Jan 28, 2022

if (KRdt.searchOnEnter || KRdt.serverSide) {

        $('#' + id + '_filter input')
          //  .unbind()
            .bind('keydown', function (e) {
                if (e.keyCode != 13) return;
                e.preventDefault(); //prevent form submit with enter input
                // if not "serverSide" use regex search
                if (!KRdt.serverSide) {
                    var value = hasSearchMode('exact') ?
                        this.value : $.fn.dataTable.util.escapeRegex(this.value);
                    searchRegex = strToRegexStr(value);
                    jQdt.search(searchRegex, true, false).draw();
                } else // if "serverSide" use normal search
                {
                    jQdt.search(this.value).draw();
                }
            });
    }

    // only search on input if not "serverSide"
    if (!KRdt.searchOnEnter && !KRdt.serverSide) {
        $('#' + id + '_filter input')
        //    .unbind()
            .bind('input', function (e) {
                var value = $.fn.dataTable.util.escapeRegex(this.value);
                searchRegex = strToRegexStr(value);
                jQdt.search(searchRegex, true, false).draw();
            });
    }

Yes, It works

KoolReport's Forum

DataTables issue with Mark.js plugin in Koolreport 5.5 #2548

Build Your Excellent Data Report