<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        bootstrapTable+ajax加載數據 refresh更新數據

        來源:懂視網 責編:小OO 時間:2020-11-27 22:08:43
        文檔

        bootstrapTable+ajax加載數據 refresh更新數據

        本文實例為大家分享了bootstrapTable+ajax加載數據,和refresh更新數據兩部分,供大家參考,具體內容如下:1.html;<;form class="form-horizontal" role="form">;<;div class="form-group">;<;label for="calendar" class="col-sm-1 control-label">;日期<;/label>;<;div class="col-sm-3">;<;<;/div>;<;/div>;<;div class="form-group">;<;時間類別<;/label>;<;<。
        推薦度:
        導讀本文實例為大家分享了bootstrapTable+ajax加載數據,和refresh更新數據兩部分,供大家參考,具體內容如下:1.html;<;form class="form-horizontal" role="form">;<;div class="form-group">;<;label for="calendar" class="col-sm-1 control-label">;日期<;/label>;<;div class="col-sm-3">;<;<;/div>;<;/div>;<;div class="form-group">;<;時間類別<;/label>;<;<。

        本文實例為大家分享了bootstrapTable+ajax加載數據,和refresh更新數據兩部分,供大家參考,具體內容如下

        1.html

        <form class="form-horizontal" role="form">
         <div class="form-group">
         <label for="calendar" class="col-sm-1 control-label">日期</label>
         <div class="col-sm-3">
         <input type="text" id="calendar" class="form-control" value="2018-06-13" class="form-control">
         </div>
         </div>
         <div class="form-group">
         <label for="types" class="col-sm-1 control-label">時間類別</label>
         <div class="col-sm-3">
         <select name="" id="types" class="form-control">
         <option value="week">week</option>
         <option value="month">month</option>
         <option value="sixmonth">sixmonth</option>
         </select>
         </div>
         </div>
        </form>
        <div class="tableDisplay" id="dataTable">
         <table class="table table-bordered" width="100%" style="margin-bottom:0px;" data-height="460">
         </table>
        </div>

        2.js

        <script>
         //日期時間格式化20180613
         function dateFormat(time){
         //time = 2018-06-13;
         var splitArr = time.split('-'),
         newStr = splitArr.join('');
         return newStr;
         }
         $(document).ready(function() {
         //啟動日期插件
         $('#calendar').datetimepicker({
         language: 'zh-CN',
         weekStart: 1,
         todayBtn: 1,
         autoclose: 1,
         todayHighlight: 1,
         startView: 2,
         minView: 2,
         forceParse: 0
         });
         //日期改變時刷新table;
         $('#calendar').on('changeDate', function(ev){
         $dataTableHot.bootstrapTable('refresh');
         });
        
         var type=$("#types option:selected").val();
         $("#types").change(function(){
         type = $("#types option:selected").val();
         $dataTableHot.bootstrapTable('refresh');
         })
         var $dataTableHot = $("#dataTable table").bootstrapTable({
         search: false,
         pagination: true,
         pageSize: 15,
         pageList: [5, 10, 15, 20],
         showColumns: true,
         showRefresh: false,
         locale: "zh-CN",
         striped: true,
         toggle:true,
         ajax:function(request) {
         $.ajax({
         url:"http://127.0.0.1:8080/getdata",
         type:"GET",
         dataType:"json",
         data:{
         date:dateFormat($("#calendar").val()), //dateFormat($("#calendar").val())
         type:type,
         value:"hot",
         order:"asc"
         },
         success:function(data){
         request.success({
         row : data
         });
         $('#dataTable table').bootstrapTable('load', data);
         },
         error:function(error){
         console.log(error);
         }
         })
         },
         columns:[{
         field: "projectId",
         title:"projectId"
         },{
         field: "projectName",
         title:"projectName"
         }, {
         field: "value",
         title:"value"
         }]
         });
        
         });
        
        </script>
        
        

        3.刷新表格

        $dataTableHot.bootstrapTable('refresh);

        4.bootstrap-datatimepick日期時間插件,日期changeDate事件

        $("#canlendar").on('changeDate',function(ev){ ... });

        5.在最后添加"操作"列,實現查看"詳情"操作

        columns:[...,
         {
         title:"操作",
         events:{ //為按鈕添加事件
         "click #details":function(e,value,row,index){
         alert("項目名稱:"+row.projectName);
         }
         },
         formatter:function(value,row,index){ //把需要創建的按鈕封裝在函數中
         return "<button class='btn btn-default' id="details">詳情</button>"
         }
         }
        ]
        
        

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        bootstrapTable+ajax加載數據 refresh更新數據

        本文實例為大家分享了bootstrapTable+ajax加載數據,和refresh更新數據兩部分,供大家參考,具體內容如下:1.html;<;form class="form-horizontal" role="form">;<;div class="form-group">;<;label for="calendar" class="col-sm-1 control-label">;日期<;/label>;<;div class="col-sm-3">;<;<;/div>;<;/div>;<;div class="form-group">;<;時間類別<;/label>;<;<。
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 久久精品亚洲精品国产色婷| 久久精品夜色噜噜亚洲A∨| 国产精品区免费视频| 日韩免费无码一区二区三区| 无码人妻精品中文字幕免费东京热| 羞羞漫画页面免费入口欢迎你 | 亚洲成av人片天堂网老年人| 亚洲av无码片在线播放| 亚洲一卡2卡4卡5卡6卡残暴在线| 亚洲精品二三区伊人久久| 国产福利在线观看永久免费| 91免费人成网站在线观看18| 亚洲成a人在线看天堂无码| 免费人成视频在线播放| 无码人妻一区二区三区免费n鬼沢| 在线观看亚洲免费视频| 久久91亚洲人成电影网站| 色婷五月综激情亚洲综合 | 国产大片线上免费看| 亚洲AV无码成人精品区蜜桃| 亚洲高清视频免费| 亚洲日韩中文无码久久| 亚洲.国产.欧美一区二区三区| 久久青草国产免费观看| 亚洲免费电影网站| 1区2区3区产品乱码免费| 2020亚洲男人天堂精品| 一级毛片直播亚洲| 亚洲国产精品无码久久九九大片| 香蕉免费一区二区三区| 亚洲中文字幕无码久久2020| 久久国产色AV免费观看| 水蜜桃亚洲一二三四在线| 男女拍拍拍免费视频网站| 国产精品高清全国免费观看| 一级毛片免费播放试看60分钟| 国产a级特黄的片子视频免费| 亚洲色成人四虎在线观看| 亚洲片国产一区一级在线观看| 国产亚洲福利一区二区免费看| 无码国模国产在线观看免费|