datatables
Showing
3 changed files
with
60 additions
and
30 deletions
| ... | @@ -7,5 +7,7 @@ | ... | @@ -7,5 +7,7 @@ |
| 7 | <script type="text/javascript" src="/resource/lib/jquery.validation/1.14.0/messages_zh.js"></script> | 7 | <script type="text/javascript" src="/resource/lib/jquery.validation/1.14.0/messages_zh.js"></script> |
| 8 | <script type="text/javascript" src="/resource/lib/My97DatePicker/4.8/WdatePicker.js"></script> | 8 | <script type="text/javascript" src="/resource/lib/My97DatePicker/4.8/WdatePicker.js"></script> |
| 9 | <script type="text/javascript" src="/resource/lib/webuploader/0.1.5/webuploader.min.js"></script> | 9 | <script type="text/javascript" src="/resource/lib/webuploader/0.1.5/webuploader.min.js"></script> |
| 10 | <script type="text/javascript" src="/resource/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> | ||
| 11 | <script type="text/javascript" src="/resource/datatable.js"></script> | ||
| 10 | <script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script> | 12 | <script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script> |
| 11 | <script type="text/javascript" src="/resource/upload.js"></script> | 13 | <script type="text/javascript" src="/resource/upload.js"></script> | ... | ... |
| ... | @@ -3,15 +3,15 @@ | ... | @@ -3,15 +3,15 @@ |
| 3 | <body> | 3 | <body> |
| 4 | <?php $this->load->view('common/work_header'); ?> | 4 | <?php $this->load->view('common/work_header'); ?> |
| 5 | <div class="page-container"> | 5 | <div class="page-container"> |
| 6 | <form class="search"> | 6 | <form class="" onreset="resetHandler()"> |
| 7 | <div class="date mb-20"> | 7 | <div class="date mb-20"> |
| 8 | <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'logmax\')||\'%y-%M-%d\'}' })" id="logmin" class="input-text Wdate"> - | 8 | <input type="text" onfocus="WdatePicker({ maxDate:'#F{$dp.$D(\'max\')||\'%y-%M-%d\'}',onpicked:function(){$('#table').DataTable().draw()} })" id="min" class="input-text Wdate"> - |
| 9 | <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'logmin\')}',maxDate:'%y-%M-%d' })" id="logmax" class="input-text Wdate"> | 9 | <input type="text" onfocus="WdatePicker({ minDate:'#F{$dp.$D(\'min\')}',maxDate:'%y-%M-%d',onpicked:function(){$('#table').DataTable().draw()} })" id="max" class="input-text Wdate"> |
| 10 | </div> | 10 | </div> |
| 11 | <div class="row cl mb-20"> | 11 | <div class="row cl mb-20"> |
| 12 | <div class="col-xs-2"> | 12 | <div class="col-xs-2"> |
| 13 | <span class="select-box"> | 13 | <span class="select-box"> |
| 14 | <select class="select" size="1"> | 14 | <select class="select table_search" size="1" column="6"> |
| 15 | <option value="" selected>网点</option> | 15 | <option value="" selected>网点</option> |
| 16 | <option value="1">菜单一</option> | 16 | <option value="1">菜单一</option> |
| 17 | <option value="2">菜单二</option> | 17 | <option value="2">菜单二</option> |
| ... | @@ -21,7 +21,7 @@ | ... | @@ -21,7 +21,7 @@ |
| 21 | </div> | 21 | </div> |
| 22 | <div class="col-xs-2"> | 22 | <div class="col-xs-2"> |
| 23 | <span class="select-box"> | 23 | <span class="select-box"> |
| 24 | <select class="select" size="1"> | 24 | <select class="select table_search" size="1" column="7"> |
| 25 | <option value="" selected>产品名称</option> | 25 | <option value="" selected>产品名称</option> |
| 26 | <option value="1">菜单一</option> | 26 | <option value="1">菜单一</option> |
| 27 | <option value="2">菜单二</option> | 27 | <option value="2">菜单二</option> |
| ... | @@ -31,27 +31,27 @@ | ... | @@ -31,27 +31,27 @@ |
| 31 | </div> | 31 | </div> |
| 32 | <div class="col-xs-2"> | 32 | <div class="col-xs-2"> |
| 33 | <span class="select-box"> | 33 | <span class="select-box"> |
| 34 | <select class="select" size="1"> | 34 | <select class="select table_search" size="1" column="10"> |
| 35 | <option value="" selected>客户经理</option> | 35 | <option value="" selected>客户经理</option> |
| 36 | <option value="1">菜单一</option> | 36 | <option>李四</option> |
| 37 | <option value="2">菜单二</option> | 37 | <option>菜单二</option> |
| 38 | <option value="3">菜单三</option> | 38 | <option>菜单三</option> |
| 39 | </select> | 39 | </select> |
| 40 | </span> | 40 | </span> |
| 41 | </div> | 41 | </div> |
| 42 | <div class="col-xs-2"> | 42 | <div class="col-xs-2"> |
| 43 | <span class="select-box"> | 43 | <span class="select-box"> |
| 44 | <select class="select" size="1"> | 44 | <select class="select table_search" size="1" column="11"> |
| 45 | <option value="" selected>流程节点</option> | 45 | <option value="" selected>流程节点</option> |
| 46 | <option value="1">菜单一</option> | 46 | <option>完成</option> |
| 47 | <option value="2">菜单二</option> | 47 | <option>菜单二</option> |
| 48 | <option value="3">菜单三</option> | 48 | <option>菜单三</option> |
| 49 | </select> | 49 | </select> |
| 50 | </span> | 50 | </span> |
| 51 | </div> | 51 | </div> |
| 52 | <div class="col-xs-2"> | 52 | <div class="col-xs-2"> |
| 53 | <span class="select-box"> | 53 | <span class="select-box"> |
| 54 | <select class="select" size="1"> | 54 | <select class="select table_search" size="1" column="13"> |
| 55 | <option value="" selected>处理人</option> | 55 | <option value="" selected>处理人</option> |
| 56 | <option value="1">菜单一</option> | 56 | <option value="1">菜单一</option> |
| 57 | <option value="2">菜单二</option> | 57 | <option value="2">菜单二</option> |
| ... | @@ -61,13 +61,12 @@ | ... | @@ -61,13 +61,12 @@ |
| 61 | </div> | 61 | </div> |
| 62 | </div> | 62 | </div> |
| 63 | <div> | 63 | <div> |
| 64 | <input class="btn btn-primary radius" type="submit" value="提交"> | ||
| 65 | <input class="btn btn-warning radius" type="reset" value="重置"> | 64 | <input class="btn btn-warning radius" type="reset" value="重置"> |
| 66 | </div> | 65 | </div> |
| 67 | </form> | 66 | </form> |
| 68 | 67 | ||
| 69 | <div class="body mt-20"> | 68 | <div class="body mt-20"> |
| 70 | <table class="table table-border table-bordered table-bg"> | 69 | <table class="table table-border table-bordered table-bg" id="table"> |
| 71 | <thead class="text-c"> | 70 | <thead class="text-c"> |
| 72 | <tr> | 71 | <tr> |
| 73 | <th width="68px">操作</th> | 72 | <th width="68px">操作</th> |
| ... | @@ -107,7 +106,7 @@ | ... | @@ -107,7 +106,7 @@ |
| 107 | <td>融易购</td> | 106 | <td>融易购</td> |
| 108 | <td>100.00</td> | 107 | <td>100.00</td> |
| 109 | <td>100.00</td> | 108 | <td>100.00</td> |
| 110 | <td>李四</td> | 109 | <td>李三</td> |
| 111 | <td class="c-primary">预审</td> | 110 | <td class="c-primary">预审</td> |
| 112 | <td>2018-01-02 00:00:00</td> | 111 | <td>2018-01-02 00:00:00</td> |
| 113 | <td>小明</td> | 112 | <td>小明</td> |
| ... | @@ -123,7 +122,7 @@ | ... | @@ -123,7 +122,7 @@ |
| 123 | </ul> | 122 | </ul> |
| 124 | </span> | 123 | </span> |
| 125 | </td> | 124 | </td> |
| 126 | <td>1001</td> | 125 | <td>1002</td> |
| 127 | <td>张三</td> | 126 | <td>张三</td> |
| 128 | <td>333333333333333333</td> | 127 | <td>333333333333333333</td> |
| 129 | <td>13333333333</td> | 128 | <td>13333333333</td> |
| ... | @@ -134,23 +133,13 @@ | ... | @@ -134,23 +133,13 @@ |
| 134 | <td>100.00</td> | 133 | <td>100.00</td> |
| 135 | <td>李四</td> | 134 | <td>李四</td> |
| 136 | <td class="c-999">完成</td> | 135 | <td class="c-999">完成</td> |
| 137 | <td>2018-01-02 00:00:00</td> | 136 | <td>2018-01-02</td> |
| 138 | <td>小明</td> | 137 | <td>小明</td> |
| 139 | </tr> | 138 | </tr> |
| 140 | </tbody> | 139 | </tbody> |
| 141 | </table> | 140 | </table> |
| 142 | <div class="paginate"> | ||
| 143 | <div class="paginate_info">显示 1 到 1 ,共 1 条</div> | ||
| 144 | <div class="paginate_pagination"> | ||
| 145 | <a class="paginate_button">上一页</a> | ||
| 146 | <span> | ||
| 147 | <a class="paginate_button current">1</a> | ||
| 148 | </span> | ||
| 149 | <a class="paginate_button">下一页</a> | ||
| 150 | </div> | ||
| 151 | </div> | ||
| 152 | </div> | 141 | </div> |
| 153 | </div> | 142 | </div> |
| 154 | <?php $this->load->view('common/footer'); ?> | 143 | <?php $this->load->view('common/footer'); ?> |
| 155 | </body> | 144 | </body> |
| 156 | <html> | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 145 | <html> | ... | ... |
resource/datatable.js
0 → 100644
| 1 | $('#table').dataTable({ | ||
| 2 | "aaSorting": [[ 1, "desc" ]], | ||
| 3 | "pading":false | ||
| 4 | }); | ||
| 5 | |||
| 6 | $.fn.dataTableExt.afnFiltering.push( | ||
| 7 | function( oSettings, aData, iDataIndex ) { | ||
| 8 | var min = document.getElementById('min').value; | ||
| 9 | var max = document.getElementById('max').value; | ||
| 10 | var iDateCol = 12; | ||
| 11 | |||
| 12 | var dateMin = new Date(aData[iDateCol]); | ||
| 13 | var dateMax = new Date(aData[iDateCol]); | ||
| 14 | |||
| 15 | if (min === '' && max === '') | ||
| 16 | return true; | ||
| 17 | else if (new Date(min).getTime() <= dateMin.getTime() && max === '') | ||
| 18 | return true; | ||
| 19 | else if (new Date(min).getTime() <= dateMin.getTime() && new Date(max).getTime() >= dateMax.getTime()) | ||
| 20 | return true; | ||
| 21 | return false; | ||
| 22 | } | ||
| 23 | ); | ||
| 24 | |||
| 25 | $('.table_search').on('change', function () { | ||
| 26 | search = $(this).val(); | ||
| 27 | column = $(this).attr('column'); | ||
| 28 | |||
| 29 | $('#table').DataTable().column(column).search(search).draw(); | ||
| 30 | }); | ||
| 31 | |||
| 32 | $('#min, #max').on('keyup', function () { | ||
| 33 | $('#table').DataTable().draw(); | ||
| 34 | }); | ||
| 35 | |||
| 36 | function resetHandler () | ||
| 37 | { | ||
| 38 | $('#table').DataTable().columns().search("").draw(); | ||
| 39 | } |
-
Please register or sign in to post a comment