Comment obtenir un effet de mise en évidence des résultats pour la requête du champ de recherche DataTables-js tutoriel-php.cn

Le contenu de cet article est de présenter comment obtenir l'effet de mise en évidence des résultats de la requête du champ de recherche DataTables. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

DataTables est un plug-in de tableau HTML encapsulé qui enrichit le style des tableaux HTML et fournit une variété de fonctions de tableau avancées telles que la recherche instantanée et la pagination. Les utilisateurs peuvent écrire très peu de code (même utiliser simplement l'exemple de code officiel) et créer un magnifique tableau pour afficher les données. Pour plus d'informations sur DataTables, veuillez consulter : http://www.datatables.club/, https://datatables.net/. La figure suivante montre les données pertinentes des notes de voyage des attractions touristiques de Nanjing, affichées dans le tableau DataTables.

Comment obtenir un effet de mise en évidence des résultats pour la requête du champ de recherche DataTables

Comment obtenir un effet de mise en évidence des résultats pour la requête du champ de recherche DataTables在DataTables表格中展示出来

La recherche instantanée, la pagination et d'autres fonctions dans la table DataTable ci-dessus sont créé Il existe après l'objet DataTables, il n'est donc pas nécessaire d'écrire du code associé. "Recherche instantanée" signifie qu'à mesure que les caractères saisis changent, les informations correspondantes changeantes apparaîtront dans le tableau.

Comment obtenir un effet de mise en évidence des résultats pour la requête du champ de recherche DataTables

Cependant, DataTables lui-même ne fournit pas la fonction de mise en évidence des résultats de recherche, et vous devez introduire les fichiers JavaScript pertinents et écrire le code pertinent. Le site Web chinois DataTables fournit ce fichier js, mais dans l'exemple il manque une instruction pour définir le style, donc la fonction de surbrillance ne peut pas être réalisée . http://www.datatables.club/blog/2014/10/22/search-result-highlighting.html

Comment obtenir un effet de mise en évidence des résultats pour la requête du champ de recherche DataTables

1. Codes associés de DataTables

1. Squelette de code

Pour utiliser la table DataTables, vous devez l'introduire jQuery ; l'exemple utilise le CDN DataTables en ligne.

<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>

Copier après la connexion

2. Créez un tableau

Créez un élément

tag , définit les informations d'en-tête de la table table.

<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>

Copier après la connexion

3. Configurer la table dans la balise DataTable

<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>

Copier après la connexion

Le site chinois DataTables propose une méthode de mise en évidence (http://www.datatables.club/blog/2014/10/22/search-result- highlighting.html), à condition que les fichiers js puissent être mis en surbrillance, mais le style