基于jQuery的表格插件,适用场景为通过AJAX方式获取数据,快速的生成表格,Swallow-table实现了自动页码,翻页,排序功能等,提供一些常用方法和事件的监听。Demo代码中涉及到AJAX请求,请下载代码部署到你的web服务器中。
url
后台服务地址,swallow-table会向这个地址发起请求,获取数据method
发起AJAX请求的方式,取值为POST或GET,默认为POSTpage_selector
一个有效的jquery选择器,例如#page,swallow-table会在该容器中自动填充页码信息及翻页组件rows
每页显示条目数(可选,默认20)page
当前页码(可选,默认1)用户自定义参数
swallow-table请求后台数据时会发送用户自定义的参数
rows, page以及用户自定义参数会向后台请求数据时(POST方式)作为参数发送
setting
设置参数refresh
刷新表格内容,这个方法会重新向后台发起一次请求(携带用户最新设置的参数)
onload
数据请求完成时触发
- 皮肤
插件默认提供了三套皮肤,分别为swallow-table1, swallow-table2, swallow-table3, 用户也可以自己定义皮肤css
- 排序
为table的th标签设置sort属性可开启该列的排序,sort属性值会作为向后台请求数据时的参数,可以为多列开启排序,例如
<th sort="A">
,当该列升序排列时,向后台传入的参数为order_type:A,降序时为order_type:-A,设置sort属性只是开启排序,并不会在表格加载时主动发起排序,如果想让表格加载时完成排序,需要在对应的th上设置sort-default属性(属性值desc,asc,默asc),例如:<th sort="A" sort-default>
- 数据格式
返回数据应该为JSON格式,必须带有success标志位(true or false), total(总条目数),例如
{"success": true, "total": 2, "content": [{"a": 1, "b": 2, "c": 3, "d": 4}, {"a": 1, "b": 2, "c": 3, "d": 4}]}