1. Importer des fichiers
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.tablesorter.js"></script> <!-- 引入以下样式则表头出现排序图标,同时引入图片 --> <link href="css/style.css" rel="stylesheet" type="text/css" >
2. Tableau HTML standard, doit inclure les balises thead et tbody
<table id="myTable" class="tablesorter"> <thead> <tr> <th>Name</th> <th>Sex</th> <th>Address</th> </tr> </thead> <tbody> <tr> <td>zhangsan</td> <td>boy</td> <td>beijing</td> </tr> <tr> <td>lisi</td> <td>girl</td> <td>shanghai</td> </tr> <tr> ...略 </tr> </tbody> </table>
3.
$(document).ready(function(){ //第一列不进行排序(索引从0开始) $.tablesorter.defaults.headers = {0: {sorter: false}}; $(".tablesorter").tablesorter(); });
Explication supplémentaire :
Un problème rencontré lors de l'utilisation, les données de ma table sont obtenues via ajax, et il n'y a aucun problème lors du tri de la page d'accueil
Lors du tri des page suivante, les données de la page précédente seront réaffichées. Pour résoudre ce problème, vous pouvez déclencher l'événement "update"
après avoir obtenu les données avec ajax. Le code est le suivant : <🎜. >
$(".tablesorter").trigger("update");
$(".tablesorter tbody tr").addClass("delete"); $(".tablesorter tbody tr.delete").remove(); $("table tbody").append(html); $(".tablesorter").trigger("appendCache"); $(".tablesorter").trigger("update"); $(".tablesorter").trigger("sorton",[[[2,1],[0,0]]]);
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!