jtable插件api

官网2016-03-15

事例图：

一、客户端配置

1、

paging     boolean    default:false

　　配置是否分页，果断改为true。

2、

pageList    string    default:'normal' 

　 有两种样式可以选择：
    minimal 就是，只显示第一页最后一个上一页下一页图标，就是图上第一个红色框起来的前后各2个共4个翻页图标
    noraml  就是，在minimal的基础上再把页码显示出来，图上就是第一个红色框起来的数字部分（1，2...12,13）翻页快捷图标

3、

pageSize    number    default:10 

　　每页显示的记录条数，默认10条有点少，一般改成20条

4、

pageSizes    array    default:[10,25,50,100,250,500]

　　 图中第三个红色框起来的下拉列表，一般改成自己喜欢的[20,30,40,50],默认每页可选择显示500条记录

5、

pageSizeChangeArea    boolean    default:true 

　 图中第三个红色框起来的下拉列表是否显示，
    如果不显示(false)，其实pageSizes的配置也就无意义了，用户无法选择
    有时候要的就是这种效果，定死了每页显示多少条，不许更改

6、

gotoPageArea     string default:combobox textbox/none 

　 图中第二个红色框起来，跳到第几页显示的样式，默认就是一个下拉列表
    万一页数太多会是什么效果呢？还是改成textbox吧，让用户自己输入
7、

sorting     boolean     default: false

　　sorting是否按一定顺序排列，默认为否。

二、具体用法

1、引入js和css

<link href="jquery-ui-1.10.1.custom.min.css" ref="stylesheet" type="text/css">
<link href="jqueryui/jtable_jqueryui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jtable.js"></script>

 

2、页面容器

<div id="main"></div>

3、配置

<script type="text/javascript">
    $(document).ready(function () {
        $('#main').jtable({
            title: 'Table of people',
            actions: {
                listAction: 'data/jtable.json'//url地址路径
            },
            fields: {
                PersonId: {
                    key: true,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                }
            }
        });
     $('#main').jtable('load');//加载
    });
</script>