Datatables远程加载和无刷新加载

  • A+
所属分类:Web开发

我非常不愿意写表格,因为表格类的功能涉及的东西比较多。比如说翻页,比如说查询,比如说数据加载等。

表单,怎么配置都可以,毕竟都是一条数据,随便写写就能搞定,最多就是多表保存的问题而已。

但是表格真心是难搞定(也许我是前端小白吧),幸好有databales这个插件,分分钟搞定表格。

datatables的官方网站是:https://datatables.net

此插件有免费版的也有收费版的,如果用于非商业,我觉得免费版的就够了,如果用于商业,请购买正版。

这次我需要到的功能是远程加载和页面无刷新重新加载

远程数据如何编写的就不贴出来了,因为是实战,内容都是真实的。但是可以提醒的是,最好用json传递数据,好处就是便于传递、便于测试、便于解析。json要用data包起来,没有尝试过远程json读取,不知道会不会出现跨域的问题,大家可以自己试试,我的都是本地的。

因为我这里需要翻页、搜索等相关信息的显示,所以我就都给false了。

从上面代码中可以看到:ajax就是我们请求远程的数据,columns就是需要显示的字段,这个字段的个数要和你的thead相对应,否则...否则....否则会出现mydata的js错误。

从上面代码还可以看出来,我的databales实例化后我返回了一个变量,这个变量其实就是我用来进行界面无刷新加载的。

这里我们使用ajax.reload()方法来无刷新加载数据,这样当我们数据库的数据变更后,我们只需要在这里调用一下这个方法就可以了。

发表评论

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