以关注页面为例：
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=" 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=" 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="#"> 0%</a> 50 </li> 51 <li id="advance_2"><a href="#"> 20%</a> 52 </li> 53 <li id="advance_4"><a href="#"> 40%</a> 54 </li> 55 <li id="advance_6"><a href="#"> 60%</a> 56 </li> 57 <li id="advance_8"><a href="#"> 80%</a> 58 </li> 59 <li id="advance_10"><a href="#"> 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="100%"> 82 <thead> 83 <tr> 84 <th>id</th> 85 <th></th> 86 <th>任务名称</th> 87 <th>紧急程度</th> 88 <th> 进度</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>
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"> 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"> 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"> 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"> 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"> 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"> 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>
后台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)