Frontend

一个DataTables页的典型流程是： 1. 访问一个url让系统渲染一个普通的前端页面 2. 页面上内含一段javascript, 生成DataTables对象，然后立即向后端请求数据，最后在本页中填充数据 默认情况下DataTables不做任何初始过滤，待用户在searchField输入框中输入值后，才会做过滤。 现在的需求的，在上述#1步的url中即传入参数，如list.jsp?userId=123. 期望在第2步结束后， 1. userId对应的searchField输入框中显示123 2. 显示的数据已按userId=123过滤 网上搜了下，没看到较好的方案。最终自己使用了这样一套做法： 1. 通过MVC后端把userId=123的值渲染回JSP的searchField输入框中 //以SpringMVC为例 model.put(“userId”, request.getParameter(request, “userId”)); <!– list.jsp –> <tfoot> <tr> <th> <input type=”text” class=”searchField” size=”1″ placeholder=”精确匹配” value='<c:out value=”${userId}”/>’> </th> <tr> … </tfoot> 2. 在dataTable对象加载完后，立即轮询一下所有searchField, 如果有值，触发一次搜索。 <!– list.jsp –> <script> table.columns().eq( 0 ).each( function ( colIdx ) { var footerColumn = …

前后端结合，让DataTables页面接受url中的过滤参数 Read More »

虽然文档让人读起来很痛苦，但功能很全，社区也很大。推荐使用。

typeahead.js的样例文档很不详细，必须查API，而API也写得比较简略。 我这里给一个比较典型的样例，供参考。 典型用况：修改一条person记录。服务端要你上传personId参数, 但用户只记得personName; 这时你要让用户在一个输入框里输入personName, 搜索出person信息，用户选中一个记录，系统再在另一个只读的输入框里记录被选中的personId, 最后提交表单上传到服务端。 表单DOM: <form> <table> <tr> <td>Person Name</td> <td><input type="text" class="typeahead" name="personName" id="personNameInput" placeholder="输入Person Name搜索"/> </td> </tr> <tr> <td>Person ID</td> <td><input type="text" name="personId" id="personIdInput" readonly/> </td> </tr> … </table> </form>   其实也可以只提供一个输入框：用户输入Person Name并选择后，系统在输入框中显示Person ID.  但Person Name和Person ID一个是字符串类型，一个是数字类型。 遇到这种情况，typeahead.js会有个bug: 第一次搜索正常，清空输入框再次搜索就会报JS语法错误。 typeahead相关javascript: var persons = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace(‘personName’), //服务端返回的json中， Person Name对应的字段叫personName …

typeahead.js + remote ajax完整例子 Read More »

jquery表单处理建议使用malsup出的jQuery Form Plugin，还可以。

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);

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.只支持单一维度排序 …

DataTables: ajax request/response的服务端建模(java) Read More »

典型情况下，按列搜索需要满足： 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: 按列搜索的最佳实践 Read More »

列一些常用的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. 删除时不重新加载页面，要ajax 2. 删除后重新渲染表格时不会跳到第1页，不会清空当前的搜索条件 我是这么做的: var table; $( document ).ready(function() { //正式初始化table table = $(‘#myTable’).DataTable({… }); }); function delete(id){ $.ajax({ … success: function(resp){ table.draw(false); //删除记录后，立即重新渲染表格。false参数的意思是不reset, 即渲染时停留在当前页，不清空当前搜索条件 } … }); }

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