Datatables数据搜索和高亮使用jmHighligh限制为一列（解决方案在最后）

Question

我正在处理数据tables。

Datatables 允许您在插件中包含一个搜索框，但在您的许多帖子的帮助下，我能够对每一列进行单列搜索（我知道有Datatables 的一个插件，因为我无法让它为我工作。

在此之后，我尝试实现代码以在搜索后获得在 table 中突出显示的搜索结果（再次使用 Datatable 突出显示插件）。我能够做到这一点，但我想为我创建的每个搜索框添加另一个突出显示插件。

我也能够处理这个问题（使用 jquery.jmHighlight.min.js 代码）但是我发现了 2 个不同的问题：

我无法将突出显示限制在单个列中
我无法避免点击下一个搜索框突出显示消失。

这是我正在使用的部分代码：

<script>
function filterGlobal () {
    $('#example').DataTable().search(
       $('#global_filter').val()
    ).draw();
}

function filterColumn ( i ) {
    $('#example').DataTable().column( i ).search( 
       $('#col'+i+'_filter').val() 
    ).draw();

    var keyword = $('#col'+i+'_filter').val(); // this is to retrieve what have been inserted in search box called "colNUMOFCOLUMNfilter"

    $('#col'+i+'_filter td:nth-child(1)').jmRemoveHighlight(); //one of my test to limit search to a single column (the same as search box)
    $('#col'+i+'_filter td:nth-child(1)').jmHighlight(keyword); //one of my test to limit search to a single column (the same as search box)
   //I've also tried with:  $('input.column_filter').on( 'keyup click', jmRemoveHighlight()); $('input.column_filter').on( 'keyup click', jmHighlight(keyword));]

}

$(document).ready(function() {
[...]
   var table = $('#example').DataTable( {
   [...]
      "ajax": {
      [...]
      // HIGHLIGHT SEARCH (from Datatable that works only with global filter)
      "searchHighlight": true,
      [...]
   $('input.global_filter').on( 'keyup click', function () {
    filterGlobal();
   });

   $('input.column_filter').on( 'keyup click', function () {
    filterColumn( $(this).parents('tr').attr('data-column') );
   });
   [...]
</script>

所以我的问题是：

限制为单列突出显示。当我使用上面的代码 ($('#example tbody').jmRemoveHighlight()/jmHighlight(keyword)) 时，它可以工作，但所有与输入匹配的单词都会突出显示。
避免点击下一个搜索框突出显示消失。使用该代码，当我由于搜索框输入而突出显示某些内容时，当我单击另一个搜索框时，突出显示的单词 return 正常，甚至停用 jmRemoveHighlight().

能够将突出显示的一个搜索结果添加到下一个搜索结果会很棒，除非您不重置所有内容，将结果限制在每个搜索框的单个列中（只有第一个搜索框是一般搜索进入整个table).

更新 v. 0.1

没错，我不太擅长 javascript 和 jquery，但我认为这会奏效，有什么问题吗？

 $(document).ready(function() {
     var table = $('#example').DataTable( {
     [all vars of plugin]
 } );

 //many listeners like
 // LINE FOR COL REORDER    
 new $.fn.dataTable.ColReorder( table );

 // LINE FOR ENLIGHT SELECTED ROW 
 $('#example tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
 } );

 // HERE I've tried mine
 // TEST TEST
 $("input[name='keyword']").on("keyup", function () {
    window.alert("test");
    var datacol = table.column( 1 ).data(); //func of datatables to retrieve column data
    highilightMe( datacol ); //my function
});
// TEST TEST
[... many others working listeners]
});

//My function 
function highilightMe( datacol ) {
window.alert("HEY I AM HERE!");

// Read keyword
var keyword = $("input[name='keyword']").val(); //input for test highlight

//var table = $('#example').DataTable();
//var data = table.column( 0 ).data();
//Highlight the keyword inside the context
//$("#example, td, row").eq(1).jmRemoveHighlight();
//$("#example, td, row").eq(1).jmHighlight(keyword);
//window.alert();

$("#example", datacol).jmRemoveHighlight();
$("#example", datacol).jmHighilight(keyword);
}

但它仍然不起作用，甚至 WINDOWS.ALERT 也不起作用...所以这意味着函数调用不正确，但为什么...？

P.S。真正奇怪的是，使用 $("#example, td, row").eq(1).jmRemoveHighlight() 我只能突出显示一个 CELL，但在另一个 TABLE 中（我的数据 tables 被称为 #example）。

更新 v.0.2

为了了解什么不起作用并考虑到我对 jQuery 的了解很少，我重建了一个测试页面来检查什么不起作用。

此处遵循使用数据table的页面的代码。我也能够恢复数据列，但我无法使用该 var（数据数组）作为 #container 来限制突出显示功能。

完整代码如下：

 [...]
 <script type="text/javascript" charset="utf8" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
 <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.0.0/js/dataTables.fixedHeader.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.2.0/js/dataTables.colReorder.min.js"></script>
 <script type="text/javascript" src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.min.js"></script>

 <title>Untitled Document</title>

 <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
 <script type="text/javascript" src="js/dataTables.searchHighlight.min.js"></script>
 <script type="text/javascript" src="js/jquery.highlight.js"></script>
 <link rel="stylesheet" type="text/css" href="css/dataTables.searchHighlight.css">
 <script type="text/javascript" src="js/jquery.jmHighlight.min.js">    </script>
 </head>

 <body>
 <br />
 <div class="title"><u>Search module</u></div><br />
 <br />
 <table id="example" class="show" id="show">
    <thead>
        <tr>
            <th>Market</th>
            <th>Curr</th>
            <th>Prods<br />(Qn)</th>
            <th>Quality</th>
            <th>Seller<br />(type)</th>
            <th>Type</th>
            <th>Stock</th>
            <th>Price<br />(curr)</th>
            <th>GOLD<br />Curr<br />change</th>
            <th>Price<br />(GOLD)</th>
            <th>Vat<br />tax</th>
            <th>Loc. Seller<br />price</th>
            <th>Imp.<br />Tax</th>
            <th>Int. Seller<br />price</th>
            <th>Link</th>
            <th>Serv</th>
            <th>Time Rec</th>
            <th>Date</th>
        </tr>
    </thead>
    <tbody>
    <br />
    </tbody>
 </table>
 <br />
 <hr width="95%" align="center">
 <br />
 <div class="col-xs-6">
    <span>Type in a keyword:</span>
    <input type="text" name="keyword" id="keyword" placeholder="Lorem ipsum..."> //I uses this for TESTING
 </div>
 <br />
 <hr width="95%" align="center">
 <br />

 <script>
 function test ( keyword ) {
     var col = $('#example').DataTable();
     var datac = col.column( 0 ).data();
     console.log( datac );
    //$.inArray(keyword,[datac]);
    //$.inArray(jmHighlight( keyword ),[datac]);

    //$("#example", datacol).jmRemoveHighlight();
    //$("#example", datacol).jmHighilight(keyword);
    $datac.jmRemoveHighlight(); //this return an error about finding datac var...
    $datac.jmHighlight( keyword );
 }

 $(document).ready(function() {
 // TEST TEST
     $("#keyword").on("keyup", function () {
     var keyword = $("#keyword").val(); 
     test( keyword );
});
// TEST TEST
var serverChoice = "server";
var table = $('#example').DataTable( {
    "processing": true,
    "rowReorder": true,
    "lengthMenu": [ [30, 60, 90, 120, 150, -1], [30, 60, 90, 120, 150, "All"] ],
    "language": {
    "loadingRecords": "Please wait - loading..."
    },
    select: {
        style: 'multi'
    },
    "ajax": {
        "url": "server_processing_prods.php?serverch="+serverChoice,
        "dataSrc": "demo",
    },
    //CHANGE COLOR OF FONT ON DATA  
    "createdRow": function ( row, data, index ) {
        // if ( data[7].replace(/[$,]/g, '') * 1 > 10 ) {
        if ( (data[14]) = "Evening Record" ) {
            $('td', row).eq(14).addClass('evening_record');
        } else if ( (data[14]) = "Night Record" ) {
            $('td', row).eq(14).addClass('night_record');
        } else if ( (data[14]) = "Afernoon Record" ) {
            $('td', row).eq(14).addClass('afternoon_record');
        } else if ( (data[14]) = "Morning Record" ) {
            $('td', row).eq(14).addClass('morning_record');
        }
    },
    // HIGHLIGHT SEARCH
    //"searchHighlight": true,      
    //this is to set the link
       "columnDefs": [
            {  
                "targets": [0],
                "render": function ( data ) { 
                    return '<center><b><font size="1">' + data + '</font></b></center>'; 
                }
            },
            { 
                "targets": [1],
                "render": function ( data ) { 
                    return '<center><font size="1">' + data + '<br /><div class="sprite ' + data + '"></div></font></center>'; 
                }   
            },
            { 
                "targets": [2],
                "render": function ( data, type, row ) { 
                    return '<center><b><font size="1">'+ data +'</b><i> Q'+ row[3] +'</font></i></center>'; 
                }
            },              
            {  
                "targets": [3, 9, 11, 13],
                "render": function ( data ) { 
                    return '<font size="1"><center>' + data + '</center></font>'; 
                }
            },
            { 
                "targets": [4],
                "render": function ( data, type, row ) { 
                    return '<center><font size="1">'+ data +'<br><i>('+ row[5] +')</font></i></center>'; 
                }
            },      
            {  
                "targets": [8],
                "render": function ( data ) { 
                    return '<font size="1"><i><center>' + data + '</center></i></font>'; 
                }
            },      
            {  
                "targets": [10, 12],
                "render": function ( data ) { 
                    return '<font size="1"><i><center>' + data + '%</center></i></font>'; 
                }
            },      
            {  
                "targets": [14],
                "render": function ( data ) { 
                    return '<center><a href="' + data + '" target="_blank"><font color="#fff400" size="1">go to market</font></a></center>'; 
                }
            },  
            { 
                "targets": [6, 7, 15],
                "render": function ( data, type, row ) { 
                    return '<center><font size="1">'+ data +'</font></center>'; 
                }
            },
            { 
                "targets": [16],
                "render": function ( data, type, row ) { 
                    return '<center><i><font size="1">'+ data +'</font></i></center>';
                }
            },                     
            { "visible": false,  "targets": [ 3, 5 ] }
        ]   
    } );
 });
 </script>
 </body>
 </html>

这是代码。按照控制台结果。

解决方案 v. 1.0

我们开始吧。如果解释正确，通常的解决方案会更容易。

我的想法有什么问题是我试图使用本应满足 table 列的 DATA（别名数据数组）来限制 jmhighlight，但我需要做的是限制突出显示功能仅针对用特定 ID 标识的特定列。

所以最简单的方法是这样的：Datatables 让您定义 table 的任何单个列将如何

       "columnDefs": [
            {  
                "targets": [0],
                "render": function ( data ) { 
                    return '<center><div id="country"><b><font size="1">' + data + '</font></b></div></center>'; 
                }
            },

所以限制高亮功能最简单的方法是告诉函数高亮id.TABLE、part.of.TABLE和id.COLUMN中的单词。向具有不同名称的每个列添加一个 div id，我能够像这样轻松确定函数容器：

$("#example tbody #country").jmRemoveHighlight();
$("#example tbody #country").jmHighlight(keyword);

就是这样。可能这正是 rafaelcastrocouto 给我的建议，但我无法理解。

Answer 1

恭喜您已自行解决问题。但是，仅供遇到相同问题的其他人使用：我刚刚添加了一个 example in the documentation，向您展示了如何搜索和突出显示 DataTable-table.

中的特定列

更新：现在有一个新插件可以处理数据表的搜索突出显示：datatables.mark.js。

Datatables数据搜索和高亮使用jmHighligh限制为一列（解决方案在最后）

Datatables data search and highlight with jmHighligh limit to one column (solution at the end)

javascript

jquery

datatables

highlight