DataTables 検索ボックスクエリの結果強調表示効果を実現する方法-jsチュートリアル-php.cn

この記事の内容は、DataTables 検索ボックスクエリの結果強調表示効果を実現する方法を紹介することです。困っている友人は参考にしていただければ幸いです。

DataTables は、HTML テーブルのスタイルを強化し、インスタント検索やページングなどのさまざまな高度なテーブル機能を提供する、カプセル化された HTML テーブルプラグインです。ユーザーはほんの少しのコードを記述して (公式のサンプルコードを使用するだけでも)、データを表示する美しいテーブルを作成できます。 DataTable の詳細については、http://www.datatables.club/、https://datatables.net/ を参照してください。次の図は、DataTables テーブルに表示された、南京の観光名所の旅行記の関連データを示しています。

DataTables 検索ボックスクエリの結果強調表示効果を実現する方法

DataTables 検索ボックスクエリの結果強調表示効果を実現する方法在DataTables表格中展示出来

#上記の DataTable テーブルのインスタント検索、ページング、その他の機能は次のとおりです。 created これは DataTables オブジェクトの後に存在するため、関連するコードを記述する必要はありません。「瞬時検索」とは、入力した文字が変化すると、一致する情報が表に表示されることを意味します。

DataTables 検索ボックスクエリの結果強調表示効果を実現する方法

#ただし、DataTables 自体には検索結果を強調表示する機能はありません。関連する JavaScript ファイルを導入して記述する必要があります。関連するコード。 DataTables の中国語 Web サイトではこの js ファイルが提供されていますが、例

ではスタイルを設定するステートメントが 1 つ少ないため、強調表示機能を実現できません。 http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html

DataTables 検索ボックスクエリの結果強調表示効果を実現する方法

##1. DataTables 関連コード

1. DataTables を使用するにはコードスケルトンを導入する必要があります。テーブル jQuery; この例ではオンライン DataTables CDN を使用します。

<html>
<head>
    <meta charset="utf-8">
    <title>..</title>
    
    <!-- jQuery 引入 -->
    <script src="jquery-3.0.0.min.js"></script>
    
    <!-- DataTables 引入 -->
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>

<body>

</body>
</html>

ログイン後にコピー

2. テーブルを作成します

に

要素を作成します。テーブルのヘッダー情報。

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵称</th>
                <th>所在地</th>
                <th>游记文章</th>
                <th>出发时间</th>
                <th>出行天数</th>
                <th>人物</th>
                <th>人均费用</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
</body>

ログイン後にコピー

3. テーブルを DataTable

として DataTable Make に構成します。関連する設定。ここでは他のスタイルは設定されず、テーブルのデータソースのみが構成されます。 DataTables テーブルは、複数のデータソース、JavaScript オブジェクト配列、ajax によって返されるデータ、json 形式のデータなどをサポートします。ここでは、Excelのテーブルのデータをオブジェクト配列（配列の各要素がオブジェクト、つまり旅行記録情報）の形で「南京旅行記.js」ファイルに格納し、 DataTables が配置されている HTML ページの src に導入されます (「Nanjing Attractions.js ファイルには JavaScript オブジェクト配列が 1 つだけあります」)。この方法でデータソースを構成するには、DataTable コンストラクターで columns 属性を設定する必要があります。これはテーブルヘッダー情報に対応している必要があります。 DataTables スタイル設定およびデータソース構成のその他の方法については、公式ドキュメントの関連コンテンツを確認してください: https://datatables.net/examples/index。

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵称</th>
                <th>所在地</th>
                <th>游记文章</th>
                <th>出发时间</th>
                <th>出行天数</th>
                <th>人物</th>
                <th>人均费用</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
    
    <!-- DataTables 数据源 -->
    <script src="南京游记.js"></script>
    
    <!-- DataTables 设置 -->
    <script>
        $(document).ready(function(){
            var table=$(&#39;#table&#39;).DataTable({
                data:data,
                columns:[
                    {data:&#39;昵称&#39;},
                    {data:&#39;所在地&#39;},
                    {data:&#39;游记文章&#39;},
                    {data:&#39;出发时间&#39;},
                    {data:&#39;出行天数&#39;},
                    {data:&#39;人物&#39;},
                    {data:&#39;人均费用&#39;},
                    {data:&#39;相关链接&#39;}
                ]
            })
        });
    </script>
</body>

ログイン後にコピー



    
    ..
    
    
    
    
    
    
    
    

<body>
    <table id="table" class="display">
        <thead>
            <tr>
                <th>昵称</th>
                <th>所在地</th>
                <th>游记文章</th>
                <th>出发时间</th>
                <th>出行天数</th>
                <th>人物</th>
                <th>人均费用</th>
                <th>相关链接</th>
            </tr>
        </thead>
        
        <tbody>
        
        </tbody>
    </table>
    
    <!-- DataTables 数据源 -->
    <script src="南京游记.js"></script>
    
    <!-- DataTables 设置 -->
    <script>
        $(document).ready(function(){
            var table=$(&#39;#table&#39;).DataTable({
                data:data,
                columns:[
                    {data:&#39;昵称&#39;},
                    {data:&#39;所在地&#39;},
                    {data:&#39;游记文章&#39;},
                    {data:&#39;出发时间&#39;},
                    {data:&#39;出行天数&#39;},
                    {data:&#39;人物&#39;},
                    {data:&#39;人均费用&#39;},
                    {data:&#39;相关链接&#39;}
                ]
            })
        });
    </script>
</body>

ログイン後にコピー

2. 公式の検索ボックスの強調表示メソッド

DataTables 検索ボックスクエリの結果強調表示効果を実現する方法

DataTables中国語の Web サイトで強調表示の方法が提供されています (http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html)。提供されている js ファイルで強調表示機能を実装できますが、追加する必要があります。の

DataTables 検索ボックス クエリの結果強調表示効果を実現する方法

DataTables 検索ボックスクエリの結果強調表示効果を実現する方法