jquery.DataTables自定义过滤查询

  jquery.DataTables自定义过滤查询需要使用到自定义Plug-ins功能,下载的压缩包里面也有相关示例。示例为Custom filtering - range search,搜索介于2个数字间的记录。

  下面示例为jquery.DataTables自定义过滤查询介于2个日期间的记录,示例居于DataTables-1.10.7\examples\plug-ins\range_filtering.html修改。

jquery.DataTables自定义过滤查询

<script type="text/javascript">
    /* 自定义过滤函数,判断日期是否时间是否处于2个日期之间 */
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var rx = /^\d{4}(\/\d{1,2}){2}$/;//日期正则,只判断格式,是否输入正确不加判断

            var min = $('#min').val();
            var max = $('#max').val();
            var date = new Date(data[4]).getTime();//日期列,Date对象参数可以为----/--/--格式,其他格式需要自己转为此种格式,获取时间戳
            if (rx.test(min) && rx.test(max)) {
                min = new Date(min).getTime();
                max = new Date(max).getTime();

                return (date >= min && date <= max) ||
                    (date >= max && date <= min)//先后时间填写反,如果按照字段说明,那么去掉这个判断
            }

            return true;
        }
    );
    $(document).ready(function () {
        var table = $('#example').DataTable();
        //给2个输入框添加blur事件调用draw方法执行自定义过滤函数
        $('#min, #max').blur(function () {
            table.draw();
        });
    });
</script>
			<table border="0" cellspacing="5" cellpadding="5">
				<tr>
					<td>开始日期:</td>
					<td><input type="text" id="min" name="min"></td>
				</tr>
				<tr>
					<td>结束日期:</td>
					<td><input type="text" id="max" name="max"></td>
				</tr>
			</table>

 

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jquery.DataTables自定义过滤查询

评论(1)Web开发网
阅读(3639)喜欢(0)JavaScript/Ajax开发技巧