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

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

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

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

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

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

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

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

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

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

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

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

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

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: