源码示例
筛选表单
表单中包含一个日期选择器,bootstrap-datepicker 、关键词、下拉框、查询按钮。
序列化数据
jQuery 的 serialize() API 可以将表单域序列化成,键名为表单域的名称,即 name 属性的值。使用它可以很方便的将数据序列化,取代每个表单域单独取值的烦恼。
融入筛选条件
在 第一篇 中,已经完成了分页交互,现在需要将表单中的筛选条件融入其中,提交至服务端,让服务端根据筛选条件从 Database 中取出对应的数据。
在伪代码中,将“查询”按钮点击事件与 getRows 方法绑定,并在页面加载完毕后,触发一次点击事件。这样页面加载完就会调用一次改方法去获取数据总条目数。
然后为输入框监听回车事件,并在每次回车键按下时触发一次“查询”按钮点击。
在与服务端交互的 AJAX 请求中,我们将 serialize() 后的数据作为请求参数,融入 AJAX 中。