如果你没有接入搜索引擎，一般你不会需要全局的搜索框。 你还可能在表格的上下方都需要显示分页导航条。 你可能还有其他需求。。。 我一般是这样设置的： $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "dom": ‘liptpr’, … }); }); l – 页大小调整 i – 记录总数 p-t-p – 在表格上下方都显示分页导航条 r – 请求数据时显示"processing"字样 （注：要想看到"processing"需要设置table option – "processing":true)
DataTables默认情况下会多管闲事，渲染时会自动按第1列排序。 想禁止它，需要设置一下order选项： $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({ "order": [], … }); });
$( 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字段) }, … ] }); … });
怎么样只写一次代码，能让系统中所有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个请求能够执行的够快，这样即使没有菊花用户体验也能接受。
从后台获取动态JSON数据用于DataTables展现时，可能会遇到某行某字段由于为空，导致它不存在于JSON的情况。 这时就会报这个错误： 引用 Requested unknown parameter ‘someColumn’ for row x 要解决这个问题，可以对于特定的列指定该列的默认值，如 <script> $( document ).ready(function() { $(‘#someTable’).DataTable({ "processing": true, "serverSide": true, "ajax": { "url": "/someUrl", "type": "POST" }, "columns": [ … { "data": "someColumn", defaultContent:"" }, … ] }); }); </script> 但如果每列都这样，会很繁琐。可以通过columnDefs.targets做一下全表的配置： <script> $( document ).ready(function() { $(‘#someTable’).DataTable({ "processing": true, "serverSide": true, "ajax": { "url": …
如果后台对某个图片传的是url, 在前台怎么直接展示这个图片？ $(‘#example’).DataTable({ "processing": true, "serverSide": true, "ajax": { "url": "/someRestful", "type": "POST" }, "columns": [ … { "data": "imageUrl", "render": function ( data, type, full, meta ) { return data == null? ”: ‘<img src="’ + data + ‘"/>’; } }, … ] });
/** * 以ajax方式上传一个图片 * @param evt <input type="file"/>的change事件 * @param targetElement 上传成功后会设置targetElement.value = file-url */ function uploadImage(evt, targetElement){ if ( typeof(FileReader) === ‘undefined’ ){ alert("您的浏览器不支持html5 文件上传。") return; } var files = evt.target.files; // FileList object var file = files[0]; var reader = new FileReader(); var m= reader.readAsDataURL(file); reader.onload = function(e){ var dataUrl = e.target.result; var …
看这个： https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
http://caniuse.com/
数据消费者所在子域： http://page.kentphp.net/ 数据提供者所在子域： http://text.kentphp.net/ 方案 提供端搞一个proxy，用作消费端的iframe <!–提供端：http://text.kentphp.net/proxy.htm –> <!- Hey, I’m proxy–> <!–消费端：http://page.kentphp.net/page.htm–> <iframe id="proxy" src="http://text.kentphp.net/proxy.htm"> </iframe> <script> document.domain="kentphp.net"; </script> 提供端proxy和消费端设置同样的document.domain <!–提供端：http://text.kentphp.net/proxy.htm –> <script> document.domain ="kentphp.net"; </script> <!–消费端：http://page.kentphp.net/page.htm–> <script> document.domain ="kentphp.net"; </script> 消费端通过proxy发起ajax请求，但使用自己的回调函数 <!–消费端：http://page.kentphp.net/page.htm–> <script> var iframe=document.getElementById(‘proxy’); var iJs=iframe.contentWindow.$; //iframe的JS根句柄；这里之所以能拿到这个句柄，是因为本页面和proxy页面都将domain显式设置成了同一个值 iJs.get("http://text.kentphp.net/dummyJson.htm",function(data){//这里的ajax get之所以能成功，是因为proxy的原生domain和dummyJson.htm的domain相同。 alert(data); }); </script> 这样就可以了。 说明，及注意事项 1. iframe页面能把’$’函数暴露给父页面，是因为两者的domain都是kentphp.net; iframe页面能顺利请求dummyJson.htm, 是因为两者的domain都是text.kentphp.net. 也就是说， iframe有两个domain name, 一个是原生的text.kentphp.net, …