最近学校的网站建设需要,尝试使用了下Jquery dataTables控件,接触过C#的人都知道,C#中也含有一个DataTable,但它和我们今天讨论的东西无关
我使用的是官网最新的DataTables-1.10.15版本,我个人在使用的过程中遇到了相当多的问题,有的是数据显示问题,还有的是request unknown parameter xxx for row..,
还有搜索带来的刷新之后无法还原问题,这些问题我下面都会逐一解释,希望对你有所帮助.
个人感觉dataTables对于第一次接触的人来说,属性超多,让人看的眼花缭乱.我在网上搜到的大部分资料感觉对于新手来说有些复杂,特别是
ajax请求那块,由于dataTables提供的ajax请求方式非常多,加上各个版本的函数和属性名等的差异,让人看的很是头疼,不多说进入正题
1.使用步骤
1.1引入必须的js,css文件等我就不在重复了,这里需要注意的是如果你是在使用了网上的模板从而需要对模板中的dataTable进行拓展的话,请你一定搞清楚你使用的
版本,否则你在写代码时可能会遇到属性名和官方给出的不一致的问题,其次你的html部分至少要有<table>标签和<thead>
先说一个看上去复杂实则很简单的属性------------国际化(语言配置):其他的一些未标注的属性与之相类似
其他零散属性:
还有一个重要属性columnsDefs,这个属性用来设置列的属性,他不一定要和你的表格的列的数目完全一样,
targets属性指定列,orderable属性表示此列是否参与排序,name是对这一列的描述,title当然是列名了,最重要的有两个
data和render,其中data负责指定数据源,他指定的是你从服务器返回的json数据中的实体对象的属性(事实上你也可以直接写数组),这个属性下面分页时还会具体讲,
render英文意为渲染,可以看到render中带有data参数,可以把他理解为对数据的进一步处理,可以看到我的第一列使用了render,他构造了一个checkbox填充到了第一列中,并没有
使用从服务器返回的data
"columnDefs": [ { "targets":[0], "render": function(data, type, row, meta) { return '<label><input type="checkbox" /><span></span></label>'; }, "orderable":false, "width":"50px" }, { "title":"序号", "name":"1_id", "data":"id", "targets":[1], "width":"50px", "orderable":false, }, { "title":"新闻标题", "name":"2_title", "data":"title", "targets":[2], "render":function(data) { if(data.length > 25) { data = data.substring(0,25) + "..."; } return data; }, "orderable":false, "width":"400px" }, { "data":null, "targets":[3], "visible": false, "searchable": false, "orderable":false }, { "title":"发布时间", "name":"4_releaseTime", "data":"releaseTime", "targets":[4], "width":"300px", "orderable":true, "orderData":[4], }, { "title":"所在板块", "name":"5_smallId", "data":"menu.name", "targets":[5], "width":"300px", "orderable":true, "orderData":[5], }, { "title":"操作", "targets":[6], "render":function(data,type,row,meta) { var newsId = row.id; //<a data-toggle="tooltip" data-placement="top" title="查看详细" href="#"><i></i></a> return '<div><a data-toggle="tooltip" data-placement="top" title="查看详细" href="#"><i></i></a> <a data-toggle="tooltip" data-placement="top" title="删除" href="#"><i></i></a></div><div>'; }, "orderable":false, "width":"200px" } ],