jQuery datatable数据置顶

利用jQuery datatable来实现数据置顶

什么是datatable

datatable就是一个jQuery 的一个插件，可以很好的使用他来控制数据，他自带的分页、排序、搜索等等功能，这里不多介绍

实例效果

这里我把条件设成了状态为展示中的数据进行置顶

使用时注意

这个方式是把数据放进了上面的标题栏了，所以表单限制10条他是不会计入这十条里面的，翻页以及搜索他是一直存在的

实现方法

首先就是前端的设置

<table id="gz_preWarning"">
   <thead>
       <tr>
       <!--这个是设置的标题-->
           <th>名称</th>
           <th>手机号</th>
           <th>座机</th>
           <th>邮箱</th>
           <th>地址</th>
           <th>添加时间</th>
           <th>状态</th>
           <th>操作</th>
       </tr>
       <tr class="second">
       <!--这个是设置标题下面的哪一行，置顶的数据就是放在这个下面的-->
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
       </tr>
   </thead>
</table>

将插入的数据放入table里面方便后续操作

var table = $('#gz_preWarning').DataTable({
	   data: dataSet,//后台传来的数据，将他放入表格里面
	   orderCellsTop: true, 
 });

我们将数据进行筛选找到我们需要的数据

//获取到这数据进行筛选
var indexes = table.rows().eq( 0 ).filter( function (rowIdx) {    
	//筛选的条件，由于他状态返回的是字符串，这里为了方便是直接用正则进行定位到他来进行判断
   let regex = /\((.+?)\)/g;
   let str = table.cell( rowIdx, 6 ).data();
   str = str.match(regex)[0].replace("(","").replace(")","").charAt(0);
   //当他的状态是1的时候返回true
   return str == '1' ? true : false;
});

我们现在拿到了符合要求的数据，我们将他放入data

var data = table.row(indexes).data();

有了data之后我们循环放入放入second里面

for (i = 0; i < data.length; i++) {
   $('.second').find('th').eq(i).html( data[i] );
}

现在已经放入到标题里面了，放入之后他是还在下面表格当中的，可以把下面表单中重复的数据进行删除

table.row(indexes).remove().draw(false);

这是我在写表单时想到是否可以将数据进行置顶，找了一下看到了一篇博客感觉很有意思就写了下来，个人感觉有很多地方可以优化，后续再来修改

感谢阅读！！！