Month: November 2014

DataTables: column定义中的data,name和render

$( 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列默认排序

DataTables默认情况下会多管闲事,渲染时会自动按第1列排序。 想禁止它,需要设置一下order选项: $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "order": [], … }); });

DataTables: dom位置最佳实践

如果你没有接入搜索引擎,一般你不会需要全局的搜索框。 你还可能在表格的上下方都需要显示分页导航条。 你可能还有其他需求。。。 我一般是这样设置的: $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "dom": ‘liptpr’, … }); }); l – 页大小调整 i – 记录总数 p-t-p   – 在表格上下方都显示分页导航条 r – 请求数据时显示"processing"字样 (注:要想看到"processing"需要设置table option – "processing":true)

DataTables: table变量的声明最好放在document.ready()的外面

最好把DataTable变量声明到document.ready()外面来,以使得全局函数可以直接引用它 <script> var table; //在外面声明 $( document ).ready(function() { table = $(‘#myTable’).DataTable({…. }); … }); function deleteRecord(){ $.ajax({ … success: function(resp){ table.draw(); //这里直接引用table对象,让它重绘 } … }); } </script>

jquery: 让系统中所有ajax请求都伴随“菊花转”

怎么样只写一次代码,能让系统中所有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个请求能够执行的够快,这样即使没有菊花用户体验也能接受。