黄聪：JQUERY的datatables插件，Date range filter时间段筛选功能

需配合moment插件实现：http://momentjs.com/

演示：http://live.datatables.net/zuciyawi/1/edit

HTML代码

<!DOCTYPE html>
<html><head><script src="http://code.jquery.com/jquery-1.11.3.min.js"></script><link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /><script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script><meta charset=utf-8 /><title>DataTables - JS Bin</title></head><body>Minimum:<input type="text" id="txtMin" /><br />Maximum: <input type="text" id="txtMax" /><br /><button id="btnGo" type="button">Go</button><div class="container"><table id="example" class="display nowrap" width="100%"><thead><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr></thead><tfoot><tr><th>Name</th><th>Position</th><th>Office</th><th>Age</th><th>Start date</th><th>Salary</th></tr></tfoot><tbody><tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$3,120</td></tr><tr><td>Garrett Winters</td><td>Director</td><td>Edinburgh</td><td>63</td><td>2011/07/25</td><td>$5,300</td></tr><tr><td>Ashton Cox</td><td>Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$4,800</td></tr><tr><td>Cedric Kelly</td><td>Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td><td>$3,600</td></tr><tr><td>Jenna Elliott</td><td>Financial Controller</td><td>Edinburgh</td><td>33</td><td>2008/11/28</td><td>$5,300</td></tr><tr><td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>$4,525</td></tr><tr><td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>$4,080</td></tr><tr><td>Rhona Davidson</td><td>Integration Specialist</td><td>Edinburgh</td><td>55</td><td>2010/10/14</td><td>$6,730</td></tr><tr><td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><td>2009/09/15</td><td>$5,000</td></tr><tr><td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>2008/12/13</td><td>$3,600</td></tr><tr><td>Jena Gaines</td><td>System Architect</td><td>London</td><td>30</td><td>2008/12/19</td><td>$5,000</td></tr><tr><td>Quinn Flynn</td><td>Financial Controller</td><td>Edinburgh</td><td>22</td><td>2013/03/03</td><td>$4,200</td></tr><tr><td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>36</td><td>2008/10/16</td><td>$5,300</td></tr><tr><td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>2012/12/18</td><td>$4,800</td></tr><tr><td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>2010/03/17</td><td>$2,875</td></tr><tr><td>Michael Silva</td><td>Senior Marketing Designer</td><td>London</td><td>66</td><td>2012/11/27</td><td>$3,750</td></tr><tr><td>Paul Byrd</td><td>Javascript Developer</td><td>New York</td><td>64</td><td>2010/06/09</td><td>$5,000</td></tr><tr><td>Gloria Little</td><td>Systems Administrator</td><td>New York</td><td>59</td><td>2009/04/10</td><td>$3,120</td></tr><tr><td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>$3,120</td></tr><tr><td>Dai Rios</td><td>System Architect</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>$4,200</td></tr><tr><td>Jenette Caldwell</td><td>Financial Controller</td><td>New York</td><td>30</td><td>2011/09/03</td><td>$4,965</td></tr><tr><td>Yuri Berry</td><td>System Architect</td><td>New York</td><td>40</td><td>2009/06/25</td><td>$3,600</td></tr><tr><td>Caesar Vance</td><td>Technical Author</td><td>New York</td><td>21</td><td>2011/12/12</td><td>$4,965</td></tr><tr><td>Doris Wilder</td><td>Sales Assistant</td><td>Edinburgh</td><td>23</td><td>2010/09/20</td><td>$4,965</td></tr><tr><td>Angelica Ramos</td><td>System Architect</td><td>London</td><td>36</td><td>2009/10/09</td><td>$2,875</td></tr><tr><td>Gavin Joyce</td><td>Developer</td><td>Edinburgh</td><td>42</td><td>2010/12/22</td><td>$4,525</td></tr><tr><td>Jennifer Chang</td><td>Regional Director</td><td>London</td><td>28</td><td>2010/11/14</td><td>$4,080</td></tr><tr><td>Brenden Wagner</td><td>Software Engineer</td><td>San Francisco</td><td>18</td><td>2011/06/07</td><td>$3,750</td></tr><tr><td>Ebony Grimes</td><td>Software Engineer</td><td>San Francisco</td><td>48</td><td>2010/03/11</td><td>$2,875</td></tr><tr><td>Russell Chavez</td><td>Director</td><td>Edinburgh</td><td>20</td><td>2011/08/14</td><td>$3,600</td></tr><tr><td>Michelle House</td><td>Integration Specialist</td><td>Edinburgh</td><td>37</td><td>2011/06/02</td><td>$3,750</td></tr><tr><td>Suki Burks</td><td>Developer</td><td>London</td><td>53</td><td>2009/10/22</td><td>$2,875</td></tr><tr><td>Prescott Bartlett</td><td>Technical Author</td><td>London</td><td>27</td><td>2011/05/07</td><td>$6,730</td></tr><tr><td>Gavin Cortez</td><td>Technical Author</td><td>San Francisco</td><td>22</td><td>2008/10/26</td><td>$6,730</td></tr><tr><td>Martena Mccray</td><td>Integration Specialist</td><td>Edinburgh</td><td>46</td><td>2011/03/09</td><td>$4,080</td></tr><tr><td>Unity Butler</td><td>Senior Marketing Designer</td><td>San Francisco</td><td>47</td><td>2009/12/09</td><td>$3,750</td></tr><tr><td>Howard Hatfield</td><td>Financial Controller</td><td>San Francisco</td><td>51</td><td>2008/12/16</td><td>$4,080</td></tr><tr><td>Hope Fuentes</td><td>Financial Controller</td><td>San Francisco</td><td>41</td><td>2010/02/12</td><td>$4,200</td></tr><tr><td>Vivian Harrell</td><td>System Architect</td><td>San Francisco</td><td>62</td><td>2009/02/14</td><td>$4,965</td></tr><tr><td>Timothy Mooney</td><td>Financial Controller</td><td>London</td><td>37</td><td>2008/12/11</td><td>$4,200</td></tr><tr><td>Jackson Bradshaw</td><td>Director</td><td>New York</td><td>65</td><td>2008/09/26</td><td>$5,000</td></tr><tr><td>Miriam Weiss</td><td>Support Engineer</td><td>Edinburgh</td><td>64</td><td>2011/02/03</td><td>$4,965</td></tr><tr><td>Bruno Nash</td><td>Software Engineer</td><td>London</td><td>38</td><td>2011/05/03</td><td>$4,200</td></tr><tr><td>Odessa Jackson</td><td>Support Engineer</td><td>Edinburgh</td><td>37</td><td>2009/08/19</td><td>$3,600</td></tr><tr><td>Thor Walton</td><td>Developer</td><td>New York</td><td>61</td><td>2013/08/11</td><td>$3,600</td></tr><tr><td>Finn Camacho</td><td>Support Engineer</td><td>San Francisco</td><td>47</td><td>2009/07/07</td><td>$4,800</td></tr><tr><td>Elton Baldwin</td><td>Data Coordinator</td><td>Edinburgh</td><td>64</td><td>2012/04/09</td><td>$6,730</td></tr><tr><td>Zenaida Frank</td><td>Software Engineer</td><td>New York</td><td>63</td><td>2010/01/04</td><td>$4,800</td></tr><tr><td>Zorita Serrano</td><td>Software Engineer</td><td>San Francisco</td><td>56</td><td>2012/06/01</td><td>$5,300</td></tr><tr><td>Jennifer Acosta</td><td>Javascript Developer</td><td>Edinburgh</td><td>43</td><td>2013/02/01</td><td>$2,875</td></tr><tr><td>Cara Stevens</td><td>Sales Assistant</td><td>New York</td><td>46</td><td>2011/12/06</td><td>$4,800</td></tr><tr><td>Hermione Butler</td><td>Director</td><td>London</td><td>47</td><td>2011/03/21</td><td>$4,080</td></tr><tr><td>Lael Greer</td><td>Systems Administrator</td><td>London</td><td>21</td><td>2009/02/27</td><td>$3,120</td></tr><tr><td>Jonas Alexander</td><td>Developer</td><td>San Francisco</td><td>30</td><td>2010/07/14</td><td>$5,300</td></tr><tr><td>Shad Decker</td><td>Regional Director</td><td>Edinburgh</td><td>51</td><td>2008/11/13</td><td>$5,300</td></tr><tr><td>Michael Bruce</td><td>Javascript Developer</td><td>Edinburgh</td><td>29</td><td>2011/06/27</td><td>$4,080</td></tr><tr><td>Donna Snider</td><td>System Architect</td><td>New York</td><td>27</td><td>2011/01/25</td><td>$3,120</td></tr></tbody></table></div></body>
</html>

JS代码：

$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {var valid = true;var min = moment($("#txtMin").val());if (!min.isValid()) { min = null; }var max = moment($("#txtMax").val());if (!max.isValid()) { max = null; }if (min === null && max === null) {// no filter applied or no date columnsvalid = true;}else {$.each(settings.aoColumns, function (i, col) {if (col.type == "date") {var cDate = moment(data[i]);if (cDate.isValid()) {if (max !== null && max.isBefore(cDate)) {valid = false;}if (min !== null && cDate.isBefore(min)) {valid = false;}}else {valid = false;}}});}return valid;
});$(document).ready( function () {$("#btnGo").click(function () {$('#example').DataTable().draw();});var table = $('#example').DataTable({columns:[{name:"Name"},{name:"Postition"},{name:"Office"},{name:"Age"},{name:"Start Date", type:"date"},{name:"Salary"}]});
} );

转载于:https://www.cnblogs.com/huangcong/p/7620515.html

黄聪：JQUERY的datatables插件，Date range filter时间段筛选功能相关推荐

jQuery的DataTables插件的使用方法[转]
转自:http://www.guoxk.com/node/jquery-datatables 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的 ...
daterangepicker java_日期选择插件Date Range Picker
Date Range Picker jQuery Date Range Picker 是一个基于 jQuery 的日期选择插件,使用起来也算方便,主要提日期范围.单个日期 (时间.周.快捷键.每周其 ...
【JQuery】Datatables插件的基本使用方法
介绍 Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 基本使用既然是JQuery的插件,那么在引入之前肯定是先引入JQ库. JQu ...
黄聪：WordPress图片插件：Auto Highslide修改版（转）
一直以来很多人都很喜欢我博客使用的图片插件,因为我用的跟原版是有些不同的,效果比原版的要好,他有白色遮罩层,可以直观的知道上下翻图片和幻灯片放映模式.很多人使用原版之后发现我用的更加帅一些,于是很多人 ...
jQuery图片切换插件jquery.cycle.js
Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后. <he ...
黄聪： 50 个 Bootstrap 插件
Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...
php 导出tables,jquery+php实现导出datatables插件数据到excel的方法_php技巧
本文实例讲述了jquery+php实现导出datatables插件数据到excel的方法.分享给大家供大家参考.具体如下: DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依 ...
自定义ajax脚本出粗哦,jQuery DataTables插件自定义Ajax分页实例解析
一.问题描述园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数 ...
精心收集的jQuery常用的插件1000
花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. 1.accordion类基于jQuery开发,非常简单的水平方向折叠控件. Horiz ...

黄聪：JQUERY的datatables插件，Date range filter时间段筛选功能

黄聪：JQUERY的datatables插件，Date range filter时间段筛选功能相关推荐

最新文章

热门文章