jquerytable的同步和异步数据源展示

原创

langy1990 2023-08-18 11:24:23 ©著作权

文章标签 数据 json ajax 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者langy1990的原创作品，请联系作者获取转载授权，否则将追究法律责任

同步数据源

<script>
  $(function () {
    $('#dataform').DataTable({
            processing: true,//显示“处理中...”
             // 是否启用分页
            paging: true,
            // 是否启用本地搜索
            searching: true,
            // 是否启用UI
            // 是否自适应宽度
            autoWidth: false,
            lengthChange: true
        })
    });
</script>

<div class="box-body">
                  <table style="font-size: 13px;" class="table table-striped table-bordered dataTable no-footer" id="dataform">
                      <thead>
                        <tr>
                           <th>所属服务器</th>
                           <th>监控项名称</th>
                           <th>严重等级</th>
                           <th>最后一次检测数据</th>
                           <th>开始时间</th>
                           <th>持续时间</th>
                           <th>告警通知</th>
                        </tr>
                      </thead>
                      <tbody>
                      {% for event in eventsres %}
                         <tr class="even gradeX">
                          <td>{{ event.ip }}</td>
                          <td>{{ event.itemname }}</td>
                          <td>
                             {% if event.priority == 0 %}
                                  未分类
                              {% elif  event.priority == 1 %}
                                  信息
                              {% elif  event.priority == 2 %}
                                  警告
                              {% elif  event.priority == 3 %}
                                  一般严重
                              {% elif  event.priority == 4 %}
                                  严重
                              {% elif  event.priority == 5 %}
                                  灾难
                              {% else %}
                                  正常
                              {% endif %}
                          </td>
                          <td>{{ event.lastdata }}</td>
                          <td>{{ event.starttime }}</td>
                          <td>{{ event.ctutime }}</td>
                          <td>
                           <a href='#'  onclick='showmsg(this,"{{ event.eventurl }}")'>
                               <span style='font-size:10px;' class='btn btn-xs bg-purple btn-success'>查看详情</span>
                           </a>
                          </td>
                         </tr>
                      {% endfor %}
                      </tbody>
                  </table>
                </div>

html

异步数据源

<script>

    function showmsg(obj,eventurl)
    {
        $(obj).attr("data-toggle","modal");
        $(obj).attr("data-target","#myModal");

        var datatable = $("#dbmsg").dataTable();
        if (datatable)
        {
          datatable.fnClearTable();      //清空数据
          datatable.fnDestroy();         //销毁datatable
        }

        $.ajax({
             type: 'GET',
             url: '/monitor/eventmsglist/',
             data: {eventurl: eventurl},
             success: function (data) {
               $("#dbmsg").DataTable({
                   "data":data,
                   "columnDefs" :
                     [
                        {
                            "targets": [0],
                            "render": function(data, type, row, meta)
                            {
                                return row.alerttime
                            }
                        },
                        {
                            "targets": [1],
                            "render": function(data, type, row, meta)
                            {
                                return row.sendto
                            }
                        },
                         {
                            "targets": [2],
                            "render": function(data, type, row, meta)
                            {
                                return row.alerttype
                            }
                        },
                        {
                            "targets": [3],
                            "render": function(data, type, row, meta)
                            {
                                return row.alertmessage
                            }
                        }
                     ]
               });
             },
             fail:function()
             {
                alert("出现异常");
             }
         });
    }
</script>

<td>
                           <a href='#'  onclick='showmsg(this,"{{ event.eventurl }}")'>
                               <span style='font-size:10px;' class='btn btn-xs bg-purple btn-success'>查看详情</span>
              </a>
  </td>




  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">告警详情</h4>
            </div>
            <div class="modal-body">
                <table style="font-size:13px;width:100%" class="table table-striped table-bordered dataTable no-footer" id="dbmsg" >
                  <thead>
                        <tr>
                            <th>通知时间</th>
                            <th>通知人</th>
                            <th>通知方式</th>
                            <th>通知内容</th>
                        </tr>
                  </thead>
              </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->

html

使用异步加载table的时候一定要注意先判断是否存在表格对象有的话就必须先销毁否则就会报错报错信息如下

jquerytable的同步和异步数据源展示_ajax

使用js在load数据之前先判断table对象是否已经存在

var datatable = $("#tablequeren").dataTable();
        if (datatable)
        {
          datatable.fnClearTable();      //清空数据
          datatable.fnDestroy();         //销毁datatable
        }

#上面的代码必须添加

        $("#loadingModal").modal('show');
       $.ajax({
              type: 'POST',
              url: 'url',
              data:{"batch_id":batch_id,"type":type,"value":value,csrfmiddlewaretoken:'{{ csrf_token }}'},
              success: function (msg) {
                  msg = JSON.parse(msg);
                  if(msg.Code==200) {
                      $("#tablequeren").DataTable({
                          "data": msg["Data"],
                          "processing": true,
                          "columnDefs":
                              [
                                  {
                                      "targets": [0],
                                      "render": function (data, type, row, meta) {
                                          return "<input type='checkbox' id='id' class='i-checks' value='" + row["deploy_id"] + "' name='id' />";
                                      }
                                  }
]

js只实现清空表格数据不需要清空表格对象(从内存中清除表格对象)

var datatable = $("#tablequeren").dataTable();
        if (datatable)
        {
          datatable.fnClearTable();      //清空数据

        }

jquerytable的同步和异步数据源展示_ajax_02

字典和列表转换成json对象到前端

res=json.loads(json.dumps(status))
return JsonResponse(res,safe=False)

status=[]
def get_page(name,ip,url):
    try:
        response=requests.get(url)
        if response.status_code == 200:
            print('%s received from %s' %(response.text,url))
            status.append({"name":name,"code":int(response.text),"url":ip})
        else:
            print("%s 获取数据异常" %(url))
            status.append({"name":name,"code":7,"url":ip})
    except:
        print("%s 获取数据异常" % (url))
        status.append({"name":name,"code":7,"url":ip})


class MonitorViewData(LoginRequiredMixin, View):

    def get(self,request):
        global status
        del status[:]
        prov_ips = [
            {"site": "上海", "url": "10.199.137.4"}, {"site": "重庆", "url": "10.199.137.5"},
            {"site": "广东", "url": "10.199.137.6"}, {"site": "江苏", "url": "10.199.137.7"},
            {"site": "宁波", "url": "10.199.137.8"},
            {"site": "安徽", "url": "10.199.137.9"}, {"site": "福建", "url": "10.199.137.10"},
            {"site": "湖南", "url": "10.199.137.11"}, {"site": "云南", "url": "10.199.137.12"},
            {"site": "四川", "url": "10.199.137.13"},
            {"site": "海南", "url": "10.199.137.14"}, {"site": "深圳", "url": "10.199.137.15"},
            {"site": "江西", "url": "10.199.137.16"}, {"site": "广西", "url": "10.199.137.17"},
            {"site": "浙江", "url": "10.199.137.18"},
            {"site": "山西", "url": "10.199.137.19"}, {"site": "厦门", "url": "10.199.137.20"},
            {"site": "河南", "url": "10.199.137.21"}, {"site": "甘肃", "url": "10.199.137.22"},
            {"site": "青海", "url": "10.199.137.23"},
            {"site": "陕西", "url": "10.199.137.24"}, {"site": "宁夏", "url": "10.199.137.25"},
            {"site": "湖北", "url": "10.199.137.26"}, {"site": "大连", "url": "10.199.137.27"},
            {"site": "辽宁", "url": "10.199.137.28"},
            {"site": "黑龙江", "url": "10.199.137.29"}, {"site": "吉林", "url": "10.199.137.30"},
            {"site": "山东", "url": "10.199.137.31"}, {"site": "河北", "url": "10.199.137.32"},
            {"site": "新疆", "url": "10.199.137.33"},
            {"site": "内蒙", "url": "10.199.137.34"}, {"site": "青岛", "url": "10.199.137.35"},
            {"site": "西藏", "url": "10.199.137.36"}, {"site": "北京", "url": "10.199.137.37"},
            {"site": "天津", "url": "10.199.137.38"},
            {"site": "贵州", "url": "10.199.137.39"}
        ]
        t_obj = []
        for prov in prov_ips:
            t = Thread(target=get_page, args=(
            prov["site"], prov["url"], 'http://%s:8080/monitor/singleprovincetoplevelevent/zabbix/' % (prov["url"]),))
            t.start()
            t_obj.append(t)

        # 设置join,主线程等待所有子线程执行完毕才退出
        for t in t_obj:
            t.join()

        res=json.loads(json.dumps(status))
        return JsonResponse(res,safe=False)


class MonitorView(LoginRequiredMixin, View):

    def get(self, request):
        temp_name = "service/service-header.html"
        return render(request, 'monitor/monitorquery_list.html',locals())

python

实现前台loading效果异步获取后台数据

<script>

    window.onload=init;
    provs=[];
    provstatus=[];
    provurls=[];

    function init() {
        showhide(2);
        $('#loadingModal').modal({backdrop: 'static', keyboard: false});
        $("#loadingModal").modal('show');

        $.ajax({
          type: 'GET',
          url: '/monitor/monitorviewdata/',
          success: function (res) {

         for(var i=0;i<res.length;i++)
         {
            provs.push(res[i]["name"]);
            provstatus.push(res[i]["code"]);
            provurls.push(res[i]["url"]);

            if (res[i]["code"]==0)
            {
                 unclass=unclass+1;
            }
            else if(res[i]["code"]==1)
            {
                info=info+1;
            }
            else if(res[i]["code"]==2)
            {
                jingao=jingao+1;
            }
             else if(res[i]["code"]==3)
            {
                yiban=yiban+1;
            }
             else if(res[i]["code"]==4)
            {
                yanzhong=yanzhong+1;
            }
            else if(res[i]["code"]==5)
            {
                zainan=zainan+1;
            }
            else if(res[i]["code"]==6)
            {
                normal=normal+1;
            }
             else if(res[i]["code"]==7)
            {
                unknow=unknow+1;
            }
        }

        showallprostates("all");
        $("#loadingModal").modal('hide');
       },
          fail:function () {
              alert("失败");
          }
        });
    }

</script>

html和js

jquery实现动态加载带搜索的下拉框

<link rel="stylesheet" href="/static/plugins/jQueryUI/jquery-ui.css" type="text/css" />
    <script src="/static/plugins/jQueryUI/jquery-ui.js"></script>

<style>
     .custom-combobox {
       position: relative;
       display: inline-block;
      }
    .custom-combobox-toggle {
      position: absolute;
     top: 0;
     bottom: 0;
     margin-left: -1px;
     padding: 0;
    }
   .custom-combobox-input {
     margin: 0;
     padding: 5px 10px;
    }
    </style>

导入文件

<script>
  var selectvalue="";
  $( function() {
    $.widget( "custom.combobox", {
      _create: function() {
        this.wrapper = $("<span>")
          .addClass("custom-combobox" )
          .insertAfter( this.element );
        this.element.hide();
        this._createAutocomplete();
        this._createShowAllButton();
      },

      _createAutocomplete: function() {
        var selected = this.element.children( ":selected" ),
            value = selected.val() ? selected.text() : "";

        this.input = $("<input>")
          .appendTo( this.wrapper )
          .val(value)
          .attr("title", "")
          .addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
          .autocomplete({
            delay: 0,
            minLength: 0,
            source: $.proxy(this, "_source")
          })
          .tooltip({
            classes: {
              "ui-tooltip": "ui-state-highlight"
            }
          });

        this._on( this.input, {
          autocompleteselect: function(event, ui) {
            ui.item.option.selected = true;
            this._trigger("select", event, {
              item: ui.item.option
            });
          },
          autocompletechange: "_removeIfInvalid"
        });
      },

      _createShowAllButton: function() {
        var input = this.input,
          wasOpen = false;

        $("<a>")
          .attr( "tabIndex", -1 )
          .attr( "title", "显示所有选项" )
          .tooltip()
          .appendTo( this.wrapper )
          .button({
            icons: {
              primary: "ui-icon-triangle-1-s"
            },
            text: false
          })
          .removeClass( "ui-corner-all" )
          .addClass( "custom-combobox-toggle ui-corner-right" )
          .on( "mousedown", function() {
            wasOpen = input.autocomplete( "widget" ).is( ":visible" );
          })
          .on( "click", function() {
            input.trigger( "focus" );

            // Close if already visible
            if ( wasOpen ) {
              return;
            }

            // Pass empty string as value to search for, displaying all results
            input.autocomplete( "search", "" );
          });
      },

      _source: function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
        response( this.element.children( "option" ).map(function() {
          var text = $( this ).text();
          if ( this.value && ( !request.term || matcher.test(text) ) )
            return {
              label: text,
              value: text,
              option: this
            };
        }) );
      },

      _removeIfInvalid: function( event, ui ) {
        // Selected an item, nothing to do
        if ( ui.item ) {
          return;
        }

        // Search for a match (case-insensitive)
        var value = this.input.val(),
          valueLowerCase = value.toLowerCase(),
          valid = false;
        this.element.children( "option" ).each(function() {
          if ( $( this ).text().toLowerCase() === valueLowerCase ) {
            this.selected = valid = true;
            return false;
          }
        });

        // Found a match, nothing to do
        if ( valid ) {
          return;
        }

        // Remove invalid value
        this.input
          .val( "" )
          .attr( "title", value + " 没有匹配到任何选择项" )
          .tooltip( "open" );
        this.element.val( "" );
        this._delay(function() {
          this.input.tooltip( "close" ).attr( "title", "" );
        }, 2500 );
        this.input.autocomplete( "instance" ).term = "";
      },

      _destroy: function() {
        this.wrapper.remove();
        this.element.show();
      }
    });

    $("#selectvpclist").combobox({
        select: function () {
           selectvalue=$(this).val();
           getquerendata(selectvalue);
        }
    });

     $("#selectapplist").combobox({
        select: function () {
           selectvalue=$(this).val();
           getquerendata(selectvalue);
        }
    });

    //$("#toggle").on("click", function() {
      //$("#selectvpclist").toggle();
    //});
  });
  </script>

初始化脚本

<div class="box-body" style="margin-top: 20px;font-size: 15px">过滤条件：
                   <select  class="select-control" id="selecttype" onchange="changeshowselect(this)">
                       <option value="vpc">VPC</option>
                       <option value="appname">应用</option>
                   </select>


                   <select id="selectapplist">
                       <option value="0">请选择应用</option>
                   </select>

                  <select  id="selectvpclist">
                    <option value="0">请选择VPC</option>
                  </select>
</div>

html

function changeshowselect(sel)
   {
       var type=$(sel).val();
       if(type=="vpc")
       {
           getselectvpclist();
           $($(".custom-combobox").eq(1)).show();
           $($(".custom-combobox").eq(0)).hide();
       }
       else
       {
           getselectpackagelist();
           $($(".custom-combobox").eq(0)).show();
           $($(".custom-combobox").eq(1)).hide();
       }
   }

js动态控制切换显示