前后端结合,让DataTables页面接受url中的过滤参数

一个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 = $( 'input.searchField', table.column( colIdx ).footer() );
	       var value = footerColumn.attr("value");
	       if(value){	    	   
	    	   table
               .column( colIdx )
               .search( value )
               .draw();	
	       }
	    } ); 		
		    	 	
});		 
	
</script> 

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.