Lei Zhang

时光已逝永不回,
往事只能回味。
... ...
春风又吹红了花蕊,
你已经也添了新岁。

▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 96%



使用serialize()优雅的提交“筛选条件”(三)

2017-12-28 » Javascript / DataTable , jQuery , Tutorial

源码示例

Data-Table-Paginate-Tutorial

筛选表单

表单中包含一个日期选择器,bootstrap-datepicker 、关键词、下拉框、查询按钮。

序列化数据

jQuery 的 serialize() API 可以将表单域序列化成,键名为表单域的名称,即 name 属性的值。使用它可以很方便的将数据序列化,取代每个表单域单独取值的烦恼。

融入筛选条件

在 第一篇 中,已经完成了分页交互,现在需要将表单中的筛选条件融入其中,提交至服务端,让服务端根据筛选条件从 Database 中取出对应的数据。

enlightened在伪代码中,将“查询”按钮点击事件与 getRows 方法绑定,并在页面加载完毕后,触发一次点击事件。这样页面加载完就会调用一次改方法去获取数据总条目数。

enlightened然后为输入框监听回车事件,并在每次回车键按下时触发一次“查询”按钮点击。

enlightened在与服务端交互的 AJAX 请求中,我们将 serialize() 后的数据作为请求参数,融入 AJAX 中。

展开选填信息