码迷,mamicode.com
首页 > 其他好文 > 详细

Datatable get请求传参应用

时间:2019-01-11 17:19:54      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:VID   info   请求   src   errno   lag   als   gre   ble   

以关注页面为例:

html:

技术分享图片
  1 <div class="row">
  2 
  3     <div class="col-md-12 col-sm-12 col-xs-12">
  4         <div class="x_panel" style="margin-top: 0px; padding-top: 0px;">
  5             <div class="x_title">
  6                 <!--本页图标-->
  7                 <div class="btn-group">
  8                     <a href="/task_mgm/taskinfo_finished" style="font-size: 28px; padding-bottom: 5px"><i
  9                             class="fa fa-home" style="padding-top: 4px"></i> </a>
 10                 </div>
 11                 <!--与我相关-->
 12                 <div class="btn-group" style="margin-left: 4px">
 13                     <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
 14                             style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">与我相关
 15                     </button>
 16                     </button>
 17                     <ul class="dropdown-menu" id="select_task1" role="menu">
 18                         <li id="create_mine"><a href="#">我创建的任务</a>
 19                         </li>
 20                         <li id="res_mine"><a href="#">我负责的任务</a>
 21                         </li>
 22                         <li id="exe_mine"><a href="#">我参与的任务</a>
 23                         </li>
 24                         <li class="divider"></li>
 25                     </ul>
 26                 </div>
 27                 <!--到期时间-->
 28                 <div class="btn-group">
 29                       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">到期时间</button></button>
 30                       <ul class="dropdown-menu"  id="select_task2" role="menu">
 31                        <li style="">
 32                             <lable style="margin-left: 10px">从:</lable>
 33                             <input type="text" id="rz1" class="calendar-control select_input4" style="width: 140px; margin-left: 8px;" autocomplete="off"></li>
 34                         </li>
 35                         <li style="">
 36                             <lable style="margin-left: 10px">到:</lable>
 37                             <input type="text" id="rz2" class="calendar-control select_input5" style="width: 140px; margin-left: 8px;" autocomplete="off"></li>
 38                         </li>
 39                         <input id="sub_date" type="button" style="float: right; margin: 2px 8px 5px" value=" 确 定 ">
 40                       </ul>
 41                 </div>
 42                 <!--任务进度-->
 43                 <div class="btn-group">
 44                     <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
 45                             style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">任务进度
 46                     </button>
 47                     </button>
 48                     <ul class="dropdown-menu" id="task_advance" role="menu">
 49                         <li id="advance_0"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;0%</a>
 50                         </li>
 51                         <li id="advance_2"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;20%</a>
 52                         </li>
 53                         <li id="advance_4"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;40%</a>
 54                         </li>
 55                         <li id="advance_6"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;60%</a>
 56                         </li>
 57                         <li id="advance_8"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;80%</a>
 58                         </li>
 59                         <li id="advance_10"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;100%</a>
 60                         </li>
 61                         <li class="divider"></li>
 62                     </ul>
 63                 </div>
 64                 <!--更多-->
 65                 <div class="btn-group">
 66                       <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" style="background-color: #fff; color: #73879C; border-color: #73879C; margin-top: 5px">筛 选</button>
 67 
 68                       <ul class="dropdown-menu"  id="select_task3" role="menu">
 69                         <li style="text-align: center"><input type="text" class="select_input1" placeholder="按创建人筛选" style="border: #FFFFFF; margin-top: 6px">
 70                         </li>
 71                         <li style="text-align: center"><input type="text" class="select_input2" placeholder="按负责人筛选" style="border: #FFFFFF; margin-top: 3px">
 72                         </li>
 73                         <li style="text-align: center"><input type="text" class="select_input3" placeholder="按参与人筛选" style="border: #FFFFFF; margin-top: 3px">
 74                         </li>
 75                         <li class="divider"></li>
 76                       </ul>
 77                 </div>
 78                 <div class="clearfix"></div>
 79             </div>
 80             <div class="x_content">
 81                 <table id="datatable-buttonss" class="table table-hover bulk_action" style="width:100%">
 82                     <thead>
 83                     <tr>
 84                         <th>id</th>
 85                         <th></th>
 86                         <th>任务名称</th>
 87                         <th>紧急程度</th>
 88                         <th>&nbsp;&nbsp;&nbsp;进度</th>
 89                         <th>创建人</th>
 90                         <th>责任人</th>
 91                         <th>参与人</th>
 92                         <th style="text-align: center">状态</th>
 93                         <th>更新时间</th>
 94                     </tr>
 95                     </thead>
 96                     <tbody>
 97                     </tbody>
 98                 </table>
 99             </div>
100         </div>
101     </div>
102 
103 </div>
View Code

js:

技术分享图片
  1 <script>
  2     (function ($) {
  3             $.extend({
  4                 urlGet: function () {
  5                     var aQuery = window.location.href.split("?");  //取得Get所有参数
  6                     var aGET = new Array();
  7                     if (aQuery.length > 1) {
  8                         var aBuf = aQuery[1].split("&");
  9                         for (var i = 0, iLoop = aBuf.length; i < iLoop; i++) {
 10                             var aTmp = aBuf[i].split("=");  //分离key与Value
 11                             aGET[aTmp[0]] = aTmp[1];
 12                         }
 13                     } else {
 14                         flagForShow = true;
 15                     }
 16                     return aGET;
 17                 }
 18             })
 19         })(jQuery);
 20     var GetIt = $.urlGet(); // 可根据key值获取get请求参数值
 21     function goSearch() {
 22             var stime = $("#rz1").val();
 23             var etime = $("#rz2").val();
 24             var myparas = "?stime="+stime+"&etime="+etime;
 25             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 26     }
 27     $(function () {
 28         //我创建任务
 29         $("#create_mine").click(function () {
 30             var myparas = "?which=create_mine";
 31             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 32         });
 33         //我负责任务
 34         $("#res_mine").click(function () {
 35             var myparas = "?which=res_mine";
 36             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 37         });
 38         //我参与任务
 39         $("#exe_mine").click(function () {
 40             var myparas = "?which=exe_mine";
 41             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 42         });
 43         //到期日功能
 44             $("#sub_date").click(function () {
 45                 $("#select_task2").hide();
 46                 goSearch();
 47             });
 48         //任务进度0%
 49         $("#advance_0").click(function () {
 50             var myparas = "?advance=advance_0";
 51             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 52         });
 53         //任务进度20%
 54         $("#advance_2").click(function () {
 55             var myparas = "?advance=advance_2";
 56             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 57         });
 58         //任务进度40%
 59         $("#advance_4").click(function () {
 60             var myparas = "?advance=advance_4";
 61             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 62         });
 63         //任务进度60%
 64         $("#advance_6").click(function () {
 65             var myparas = "?advance=advance_6";
 66             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 67         });
 68         //任务进度80%
 69         $("#advance_8").click(function () {
 70             var myparas = "?advance=advance_8";
 71             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 72         });
 73         //任务进度100%
 74         $("#advance_10").click(function () {
 75             var myparas = "?advance=advance_10";
 76             window.location.href="/task_mgm/taskinfo_focus"+myparas;
 77         });
 78         var myparas = "?stime="+GetIt["stime"]+"&etime="+GetIt["etime"]+"&which="+GetIt["which"]+"&advance="+GetIt["advance"];
 79             // 表数据定义
 80         var table = $("#datatable-buttonss").DataTable({
 81             "aaSorting": [[9, "desc"]],
 82             // "sDom": ‘<"x_content"B><"top"lf>rt<"bottom"ip><"clear">‘,
 83             // buttons: [ ],   两者共用才能出效果   单用报错
 84             "sPaginationType": "full",
 85             "bPaginate": true, //翻页功能
 86             "bInfo": true,//页脚信息
 87             "bAutoWidth": true,//自动宽度
 88             responsive: true,
 89             // "bRetrieve": true,
 90             // "bProcessing": true, //DataTables载入数据时,是否显示‘进度’提示
 91             ajax: "/task_mgm/taskDataFocus"+myparas,
 92             "columnDefs": [
 93                 {
 94                     "targets": [0],
 95                     "visible": false,
 96                 },
 97                 {
 98                     "targets": [1],
 99                     "sorting": false,
100                     "width": "3%",
101 
102                 },
103                 {
104                     "sorting": false,
105                     "targets": [2],
106                     "render": function (data, type, row, meta) {
107                         var pageType = ‘?pageType=focusPage‘;
108                         if (row[3] == 0) {
109                             var rr = ‘<a style="color: forestgreen">&nbsp;&nbsp;0%</a>‘;
110                             if (type === ‘display‘ && data.length > 20) {
111                                 return ‘<a id="rrrrr" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data.substr(0, 16) + ‘...‘ + rr + ‘</a>‘
112                             }
113                             else {
114                                 return ‘<a id="taskFocus" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data + rr + ‘</a>‘
115                             }
116                         }
117                         else if (row[3] == 1) {
118                             var rr = ‘<a style="color: forestgreen">&nbsp;&nbsp;20%</a>‘;
119                             if (type === ‘display‘ && data.length > 20) {
120                                 return ‘<a id="rrrrr" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data.substr(0, 16) + ‘...‘ + rr + ‘</a>‘
121                             }
122                             else {
123                                 return ‘<a id="taskFocus" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data + rr + ‘</a>‘
124                             }
125                         }
126                         else if (row[3] == 2) {
127                             var rr = ‘<a style="color: forestgreen">&nbsp;&nbsp;40%</a>‘;
128                             if (type === ‘display‘ && data.length > 20) {
129                                 return ‘<a id="rrrrr" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data.substr(0, 16) + ‘...‘ + rr + ‘</a>‘
130                             }
131                             else {
132                                 return ‘<a id="taskFocus" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data + rr + ‘</a>‘
133                             }
134                         }
135                         else if (row[3] == 3) {
136                             var rr = ‘<a style="color: forestgreen">&nbsp;&nbsp;60%</a>‘;
137                             if (type === ‘display‘ && data.length > 20) {
138                                 return ‘<a id="rrrrr" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data.substr(0, 16) + ‘...‘ + rr + ‘</a>‘
139                             }
140                             else {
141                                 return ‘<a id="taskFocus" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data + rr + ‘</a>‘
142                             }
143                         }
144                         else if (row[3] == 4) {
145                             var rr = ‘<a style="color: forestgreen">&nbsp;&nbsp;80%</a>‘;
146                             if (type === ‘display‘ && data.length > 20) {
147                                 return ‘<a id="rrrrr" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data.substr(0, 16) + ‘...‘ + rr + ‘</a>‘
148                             }
149                             else {
150                                 return ‘<a id="taskFocus" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data + rr + ‘</a>‘
151                             }
152                         }
153                         else if (row[3] == 5) {
154                             var rr = ‘<a style="color: forestgreen">&nbsp;&nbsp;100%</a>‘;
155                             if (type === ‘display‘ && data.length > 20) {
156                                 return ‘<a id="rrrrr" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data.substr(0, 16) + ‘...‘ + rr + ‘</a>‘
157                             }
158                             else {
159                                 return ‘<a id="taskFocus" href="/task_mgm/taskinfo_editID=‘ + row[0] + pageType + ‘">‘ + data + rr + ‘</a>‘
160                             }
161                         }
162                     }
163                 },
164                 {
165                     "sorting": true,
166                     "targets": [3],
167                     "visible": false
168                 },
169                 {
170                     "sortable": true,
171                     "targets": [4],
172                     "width": "10%",
173                     "render": function (data, type, row, meta) {
174                         if (data == ‘非常紧急‘) {
175                             return ‘<a  class="sorting_1" style="background-color: #D94600;">‘ + data + ‘</a>‘
176                         }
177                         else if (data == ‘紧急任务‘) {
178                             return ‘<a class="sorting_1" style="background-color: #F9F900">‘ + data + ‘</a>‘
179                         }
180                         else {
181                             return ‘<a class="sorting_1" style="background-color: #4DFFFF">‘ + data + ‘</a>‘
182                         }
183                     }
184                 },
185                 {
186                     "sorting": true,
187                     "width": "8%",
188                     "targets": [5],
189                 },
190                 {
191                     "targets": [6],
192                     "visible": false
193                 },
194                 {
195                     "targets": [7],
196                     "visible": false
197                 },
198                 {
199                     "sorting": false,
200                     "targets": [8],
201                     "width": "10%",
202                     "text-align": "right",
203                     "data": null,
204                     "render": function (data, type, row, meta) {
205                         if (row[8] == 1) {
206                             return "<i class=\"fa fa-star\" id=\"focus\">已关注</i>";
207                         }
208                         else {
209                             return ""
210                         }
211                     },
212                 },
213                 {
214                     "targets": [9],
215                     "visible": false
216                 },
217             ],
218         });
219         // 行号设置
220         table.on(‘order.dt search.dt‘, function () {
221             table.column(1, {search: ‘applied‘, order: ‘applied‘}).nodes().each(function (cell, i) {
222                 cell.innerHTML = i + 1;
223             });
224         }).draw();
225         // 筛选
226         $(‘#select_task3 .select_input1‘).on( ‘keyup change‘, function () {
227                     table
228                         .columns( 5 )
229                         .search( this.value )
230                         .draw(false);
231                     });
232         $(‘#select_task3 .select_input2‘).on( ‘keyup change‘, function () {
233                     table
234                         .columns( 6 )
235                         .search( this.value )
236                         .draw(false);
237                 });
238         $(‘#select_task3 .select_input3‘).on( ‘keyup change‘, function () {
239                     table
240                         .columns( 7 )
241                         .search( this.value )
242                         .draw(false);
243                 });
244         $(".calendar-control").datetimepicker({
245                 language: ‘zh-CN‘,
246                 // format: ‘yyyy-mm-dd hh:ii‘,//显示格式
247                 format: ‘yyyy-mm-dd 00:00‘,//显示格式
248                 todayHighlight: 1,//今天高亮
249                 minView: "month",//设置只显示到月份
250                 // minView: 0,//设置显示到分钟
251                 startView: 2,
252                 weekStart: 1,
253                 forceParse: 0,
254                 showMeridian: 1,
255                 autoclose: 1,
256         });
257         // 取消关注
258         $(‘#datatable-buttonss tbody‘).on(‘click‘, ‘#focus‘, function () {
259             if (confirm(‘确定取消?‘)) {
260                 var data = table.row($(this).parents(‘tr‘)).data();
261                 $.get(‘/task_mgm/taskinfo_focusID=‘ + data[0], function (res) {
262                     if (res.errno == "OK") {
263                         return console.log(‘取消关注成功‘)
264                     }
265                     else {
266                         return console.log("取消关注失败")
267                     }
268                 });
269                 window.location.reload()
270             }
271         });
272     });
273 </script>
View Code

后台falsk:

技术分享图片
 1 # 关注任务数据
 2 @task_mgm.route(/taskDataFocus)
 3 @sso_wrapper
 4 def taskinfo_dataFocus_fun():
 5     try:
 6         which = request.values.get(which)
 7         advance = request.values.get(advance)
 8         startTime = request.values.get(stime)  # 起时
 9         endTime = request.values.get(etime)
10         time_str = setTime()
11         if startTime is None or startTime is ‘‘ or startTime == undefined:
12             startTime = time_str.split("|")[0]
13         if endTime is None or endTime is ‘‘ or endTime == undefined:
14             endTime = time_str.split("|")[1]
15 
16         # 应该根据用户名或ID 的到自己的任务  现在先暂时应任务ID
17         if which == "undefined" and advance == "undefined":
18             tasks = Task.query.filter(
19                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.endTime >= startTime, Task.endTime <= endTime,
20                      )).order_by(Task.updateTime.desc()).all()
21         elif which == "create_mine":
22             tasks = Task.query.filter(
23                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.createPeople == g.name
24                      )).order_by(Task.updateTime.desc()).all()
25         elif which == "res_mine":
26             tasks = Task.query.filter(
27                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.resPeople == g.name
28                      )).order_by(Task.updateTime.desc()).all()
29         elif which == "exe_mine":
30             tasks = Task.query.filter(
31                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.exePeople == g.name
32                      )).order_by(Task.updateTime.desc()).all()
33         elif advance == "advance_0":
34             tasks = Task.query.filter(
35                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 0
36                      )).order_by(Task.updateTime.desc()).all()
37         elif advance == "advance_2":
38             tasks = Task.query.filter(
39                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 1
40                      )).order_by(Task.updateTime.desc()).all()
41         elif advance == "advance_4":
42             tasks = Task.query.filter(
43                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 2
44                      )).order_by(Task.updateTime.desc()).all()
45         elif advance == "advance_6":
46             tasks = Task.query.filter(
47                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 3
48                      )).order_by(Task.updateTime.desc()).all()
49         elif advance == "advance_8":
50             tasks = Task.query.filter(
51                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 4
52                      )).order_by(Task.updateTime.desc()).all()
53         elif advance == "advance_10":
54             tasks = Task.query.filter(
55                 and_(Task.isDelete != 1, Task.ifFocus == 1, Task.advanceId == 5
56                      )).order_by(Task.updateTime.desc()).all()
57 
58         data = sql3json(tasks, ["id", "endState", "taskName", "advanceId", "urgentId", "createPeople", "resPeople", "exePeople", "ifFocus", "updateTime"])
59         return data
60     except Exception as e:
61         logging.error(e)
View Code

 

Datatable get请求传参应用

标签:VID   info   请求   src   errno   lag   als   gre   ble   

原文地址:https://www.cnblogs.com/We612/p/10255627.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!