zoukankan      html  css  js  c++  java
  • 黄聪: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 columns
                valid = 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"}]}
        );
    } );

  • 相关阅读:
    js中this.index使用
    js中index()的四种经典用法(转https://blog.csdn.net/superit401/article/details/51726826)
    splice()的用法
    $().click()和$(document).on('click','要选择的元素',function(){})的不同(转https://www.cnblogs.com/sqh17/p/7746418.html)
    transform(转https://blog.csdn.net/qq_24189933/article/details/79293870)
    transition 带的参数什么意思
    最后一次作业----------课程总结
    实训作业---I/O流
    第五次实训
    。。。
  • 原文地址:https://www.cnblogs.com/huangcong/p/7620515.html
Copyright © 2011-2022 走看看