高亮显示搜索结果

DataTable中文网 22 October 2014

Tags: 博客 官方博客


使用搜索引擎得到结果后,关键字都会被高亮,便于我们快速找到自己想要的结果。

DataTables也可以利用 jQuery plug-in for highlighting text 插件实现搜索结果高亮显示,效果如下图

搜索结果高亮

Highlight 插件有两个基本操作

$().highlight() //高亮
$().unhighlight() //取消高亮

那么只要监听DT的重绘方法(DT在执行排序,搜索之后都会执行重绘操作),即可实现高亮搜索结果

$(document).ready( function () {
    //DT 实例化
    var table = $('#myTable').DataTable();

    // 监听 DT 的重绘事件
    table.on( 'draw', function () {
        //获得需要高亮的容器部分
        var body = $( table.table().body() );
        //如果之前有高亮把高亮部分去掉
        body.unhighlight();
        //根据搜索框里的关键字 高亮显示
        body.highlight( table.search() );
    } );
} );

原文链接:search-result-highlighting

如果大家也有小技巧和使用经验,欢迎给我发邮件 thxopen@datatables.club


百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……