数据表数据搜索和高亮显示与jmHighligh限制为一列(解决方案在末尾)
数据表数据搜索和高亮显示与jmHighligh限制为一列(解决方案在末尾)
提问于 2016-01-08 20:15:33
我在和数据设备一起工作。
Datatable允许您在插件中包含一个搜索框，但是在您的许多帖子的帮助下，我能够对每一列进行一列搜索(我知道有一个Datatable插件，因为我无法使它为我工作)。
在此之后，我尝试实现代码以获得在表中高亮显示的搜索结果(同样使用Datatable突出显示插件)。我能够做到这一点，但我想为我创建的每个搜索框添加另一个突出显示插件。
我还能够处理这个元(使用jquery.jmHighlight.min.js代码)，但我发现了两个不同的问题：
- 我无法将高亮显示限制为一列。
- 我无法避免突出显示消失，点击下一个搜索框。
下面是我使用的代码的一部分：
<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))时，它可以工作，但是与输入匹配的所有单词都会被高亮显示。 - 避免高亮显示消失，点击下一个搜索框。使用该代码时，当由于搜索框输入而突出显示某项内容时，当我单击另一个搜索框时，突出显示的单词返回正常，甚至禁用jmRemoveHighlight()。
如果能够将一个突出显示的搜索结果添加到下一个搜索结果中，这将是很棒的，直到您没有重置所有内容，将结果限制在每个搜索框中的单个列(只有第一个搜索框将是对整个表的一般搜索)。
更新诉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()，我只能高亮显示一个单元格，但在另一个表中高亮显示(我的带有可数据的单元格被称为#示例)。
UPDATE诉0.2
为了了解哪些是不起作用的，并考虑到我对jQuery的一点了解，我重新构建了一个测试页面，以检查哪些不工作。
下面是使用可数据的页面的代码。我还能够恢复数据列，但是我不能使用这个var (数据数组)作为#容器来限制突出显示函数。
这是完整的代码：
[...]
<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>这是密码。跟踪控制台结果。
解决方案诉1.0
我们开始吧。与往常一样，如果正确解释的话，解决方案就容易得多。
我的想法的错误之处在于，我试图使用数据(别名数据数组)来限制实现表列的数据，但我需要做的是将突出显示功能限制在一个特定的列上，该列具有特定的id。
因此，最简单的方法是: Datatables允许您定义表中的任何一列都是
"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中的单词。
$("#example tbody #country").jmRemoveHighlight();
$("#example tbody #country").jmHighlight(keyword);就这样。也许这正是拉法尔卡斯特给我的建议，但我无法理解。
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-01-26 03:25:37
恭喜你自己解决了这个问题。但是，对于有同样问题的其他人，我只是添加了一个文档中的示例，它向您展示了如何搜索和突出显示数据表中特定列的内容。
更新：datatables.mark.js.：现在有一个新的插件来处理DataTables的搜索高亮显示：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34689593
复制相关文章
相似问题
无法卸载Cordova插件
无法安装cordova插件
Visual studio无法卸载Apache Cordova插件
无法安装Cordova网络插件
无法在AndroidStudio2.0中安装或卸载任何插件
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
