list.js实现前端分页和搜索查询

前段时间和同学做php项目的时候用到了list.js ，想想有必要推荐给大家，其实它的工功能挺丰富的，这边我就介绍一下它的分页和搜索查询，想了解更多功能可以访问官网的demo。

这就是list.js 的官网，我是通过vpn打开的，官网上提供了实例和下载，具体访问list.com.下面我们通过一个小的demo来演示一下。

这是前端代码块，需要注意的是上面用红色标注的地方是固定的类，id除外，且div嵌套的格式也要正确。

这是js代码块，可以看到首先实例化一个List对象，传入两个参数，前面的是id，后面的是一个对象，里面有三个属性（key-value）,valueNames的值是一个数组，里面传入的是你要实现搜索数据的class名称，可以有多个，第二个是page,对应的是你要在一页显示的条数，最后一个参数是pagination，true代表开启分页功能，false代表关闭分页功能。

上面可以看到实现了分页效果，当然下面的1 2 3 ……分页有点low,你可以通过css自定义样式让它变得更好看。

我们在input中输入lech ,可以看到只查询到了一条数据，说明实现了搜索功能。其实类似于list.js功能的js插件还有好多，或者大家知道有什么好的js插件，欢迎在下面留言，共同交流，共同进步！