JS中直接用加号拼字符串是件很恶心的事情，比如 return ‘<a href="’ + url + ‘">’ + name + ‘ </a>’; 应该使用字符串模板+占位符来解决这个问题。 第1步： 在公用的js中为String类加一个方法. String.prototype.format = function() { var args = arguments; return this.replace(/{(\d+)}/g, function(match, number) { return typeof args[number] != ‘undefined’ ? args[number] : match ; }); }; 第2步：使用模板 var template = ‘<a href="{0}">{1}</a>’; return template.format(url, name);
在表格中删除一行或多行，一般要满足： 1. 删除时不重新加载页面，要ajax 2. 删除后重新渲染表格时不会跳到第1页，不会清空当前的搜索条件 我是这么做的: var table; $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({… }); }); function delete(id){ $.ajax({ … success: function(resp){ table.draw(false); //删除记录后，立即重新渲染表格。false参数的意思是不reset, 即渲染时停留在当前页，不清空当前搜索条件 } … }); }
列一些常用的JS语句，用于查询当前表格的状态。 查询当前表格的状态 if(table.order().length > 0){ //已按其中一列排序？ … } table.columns().eq( 0).each( function ( colIdx ) { var column = table.column( colIdx ); if(column.search()){ //已按某列搜索? … } }); var sexColumn = table.column(‘sex:name’); if(sexColumn.search() == ‘male’){ //已按 性别==男 搜索？ … }
典型情况下，按列搜索需要满足： 1. 输入文字，在某列中搜索 2. 下拉选择，在某列中搜索 3. 输入框、下拉列表都应该放在表头，而不是表尾。 我是这样做的: html dom这么写 把搜索那一行作为tfoot加进来 <table id="myTable"> <thead> <tr> <th>姓名</th> <th>性别</th> <th>创建时间</th> </tr> </thead> <tfoot> <tr> <th><input type="text" class="searchField" ></th> <th><input type="text" class="searchField"></th> <th> <select class="searchField" > <option value="">不限</option> <option value="male">男</option> <option value="female">女</option> </select> </th> <th></th> </tr> </tfoot> </table> 让tfoot在上面，而不是在下面 <style style="text/css"> </style> tfoot { display: table-header-group; } 对应的javascript事件处理 …
DataTables的Ajax Http Request的结构非常奇葩，比如 引用 columns[0][data]:id columns[0][name]:id columns[0][searchable]:true columns[0][orderable]:false columns[0][search][value]:174940 columns[0][search][regex]:false columns[1][data]:sex columns[1][name]:sex columns[1][searchable]:true columns[1][orderable]:false columns[1][search][value]: columns[1][search][regex]:false 服务端的正常API不可能接受这种参数。相反它更愿意接受id, sex这种参数。 所以我们要有一个通用的解析器(parser), 从上面的奇葩中解析出id=174940, sex=male这种参数； 通用的解析器必定会有一个通用的结果，我们需要建模这个结果类。 另外，Data Tables的ajax http response也必须遵守一定规范。我们也应该在后端专门建一个通用的response 对象。 我在网上搜了很久，都没搜到现在的。所以我只好自己写。 一个依赖 <dependency> <groupId>commons-lang</groupId> <artifactId>commons-lang</artifactId> <version>2.6</version> </dependency> Request package player.kent.chen.demo.datatables; import java.util.LinkedHashMap; import java.util.Map; /** * datatables ajax 请求建模. 见 http://datatables.net/manual/server-side <br/> * 注：1.不支持regex search <br/> * 2.只支持单一维度排序 …
$( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "columns": [ { "data": "id", //第1列的数据将基于ajax返回结果中的"id"字段，如果没有指定render函数，这个字段就是本列要展示的内容。 "name": "idendity", //列名。用来标识此列，服务端可以根据这个字段实现按名字找到列。 "render": function ( data, type, full, meta ) { //定义了render函数，本列按此方法来展示内容。 return "<b>" + data + "</b>" + full.createdTime; //返回一段html, 显示时ID加粗，并把创建时间也显示出来(ajax返回结果中的createdTime字段) }, … ] }); … });
DataTables默认情况下会多管闲事，渲染时会自动按第1列排序。 想禁止它，需要设置一下order选项： $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "order": [], … }); });
如果你没有接入搜索引擎，一般你不会需要全局的搜索框。 你还可能在表格的上下方都需要显示分页导航条。 你可能还有其他需求。。。 我一般是这样设置的： $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "dom": ‘liptpr’, … }); }); l – 页大小调整 i – 记录总数 p-t-p – 在表格上下方都显示分页导航条 r – 请求数据时显示"processing"字样 （注：要想看到"processing"需要设置table option – "processing":true)
最好把DataTable变量声明到document.ready()外面来，以使得全局函数可以直接引用它 <script> var table; //在外面声明 $( document ).ready(function() { table = $(‘#myTable’).DataTable({…. }); … }); function deleteRecord(){ $.ajax({ … success: function(resp){ table.draw(); //这里直接引用table对象，让它重绘 } … }); } </script>
怎么样只写一次代码，能让系统中所有ajax请求都伴随“菊花转” ? 1. 去下载一个转菊花的gif, 放到系统中,让它有个url 2. 写一个公用的js文件如my.js, 并在每个页面中都包含它。 3. 在my.js中写两部分代码 //1. 文档加载完后，把菊花的动画声明为一个居中、暂时隐藏的dom元素，并把它加入到body中 $( document ).ready(function() { //生成一个ajax loading dom $(‘body’).append(‘<div style="display:none;width:100px;margin:0 auto;position:fixed;left:45%;top:45%;" id="loading"><img src="http://someSite/juhua.gif" /></div>’); }); //2. 全局配置：ajax请求开始时显示动画，结束时（success 或 error）隐藏动画 $(document).ajaxStart(function () { $("#loading").show(); }); $(document).ajaxComplete(function () { $("#loading").hide(); }); 注意事项： 1. 如果某个ajax请求不需要菊花，则在这次请求中设置global为false, 即不使用全局设置： $.ajax({ url: … type: "post", global: "false", … }); 2. 已经发现一个问题：如果在某个ajax的callback中启动了另一个ajax请求，则第二个ajax请求启动时不会触发ajaxStart()事件，导致系统执行第2个ajax请求时不会出现菊花。一个简单的解决办法就是确保第2个请求能够执行的够快，这样即使没有菊花用户体验也能接受。