Heim > Web-Frontend > js-Tutorial > Ausführliche Erläuterung der Codebeispiele für das direkte Laden von JQuery-Tabellen und das verzögerte Laden

Ausführliche Erläuterung der Codebeispiele für das direkte Laden von JQuery-Tabellen und das verzögerte Laden

伊谢尔伦
Freigeben: 2017-07-22 10:19:23
Original
1340 Leute haben es durchsucht

Jquery.js, jquery.dataTables.js, dataTables.bootstrap.js (optional) müssen eingeführt werden.

1. Laden Sie diesen Vergleich direkt Einfach, wie folgt:


<p id="tid" class="col-sm-12 col-md-12">
  <p id="secondtid" hidden="hidden"></p>
</p>
Nach dem Login kopieren
JSP verwendet das Bootstrap-Grid, und js lautet wie folgt:


<script type="text/javascript">
    function getgaoxinqu() {
      $(&#39;#secondtid&#39;).remove();
      $("#tid").append(
              "<p id=&#39;secondtid&#39; style=&#39;width: 100%;&#39;><table id=&#39;table_id&#39; class=&#39;table table-striped table-bordered table-hover no-footer dataTable display&#39; ><thead><tr><th nowrap>id</th><th nowrap>高新区名称</th><th nowrap>地区</th><th nowrap>工商注册企业数</th><th nowrap>网址</th><th nowrap>工业总产值(千元)</th><th nowrap>工业增加值(千元)</th><th nowrap>主导产业</th><th nowrap>财政收入(万元)</th><th nowrap>财政支出(万元)</th></tr></thead><tbody></tbody></table></p>");
      $.ajax({
            url : &#39;${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu&#39;,// 跳转到 action 
            data : {
              barName : &#39;1&#39;
            },
            serverSide: true,//服务器处理 
            traditional : true,
            type : &#39;post&#39;,
            success : function(data) {
              var dataObj = eval(data);
              $(&#39;#table_id&#39;).DataTable(
                      {
                        data : dataObj,
                        sScrollY: 600,
                        sScrollX: &#39;100%&#39;,
                        columns : [ {
                          data : &#39;id&#39;
                        },{
                          data : &#39;name&#39;
                        }, {
                          data : &#39;dy&#39;
                        }, {
                          data : &#39;gxqyy&#39;
                        }, {
                          data : &#39;www&#39;
                        }, {
                          data : &#39;gysum&#39;
                        }, {
                          data : &#39;gyadd&#39;
                        }, {
                          data : &#39;zdcy&#39;
                        } , {
                          data : &#39;cztr&#39;
                        } , {
                          data : &#39;czzc&#39;
                        } ],
                        order:[[ 0, "asc" ]],
                        language : {
                          search : "在表格中搜索:",
                          show : "显示",
                          "sProcessing" : "处理中...",
                          "sLengthMenu" : "显示 _MENU_ 项结果",
                          "sZeroRecords" : "没有匹配结果",
                          "sInfo" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                          "sInfoEmpty" : "显示第 0 至 0 项结果,共 0 项",
                          "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
                          "sInfoPostFix" : "",
                          "sSearch" : "搜索:",
                          "sUrl" : "",
                          "sEmptyTable" : "表中数据为空",
                          "sLoadingRecords" : "载入中...",
                          "sInfoThousands" : ",",
                          "oPaginate" : {
                            "sFirst" : "首页",
                            "sPrevious" : "上页",
                            "sNext" : "下页",
                            "sLast" : "末页"
                          },
                          "oAria" : {
                            "sSortAscending" : ": 以升序排列此列",
                            "sSortDescending" : ": 以降序排列此列"
                          }
                        }
                      });
              showPage();
            },
            error : function() {
              alert("异常!");
            }
          });
      showPage();//高度调节
    }
</script>
Nach dem Login kopieren
Backend Übergeben Sie einfach einen JSON


List<GaoXinDistrict> gxlist=new ArrayList<GaoXinDistrict>();
      String sql="select * from ODS10000060";
      try {
        List<Map> list = oracledictionaryService.executeSqlToRecordMap(sql);
        for (Map map : list) {
          GaoXinDistrict gx=new GaoXinDistrict();
          Object id= map.get("ID");
          Object name = map.get("NAME");
          Object JB = map.get("JB");
          Object DY = map.get("DY");
          Object YEAR = map.get("YEAR");
          Object FZR = map.get("FZR");
          Object TBR = map.get("TBR");
          Object phone = map.get("PHONE");
          Object EMAIL = map.get("EMAIL");
          Object WWW = map.get("WWW");
          Object GXQMJSUM = map.get("GXQMJSUM");
          Object JCMJ = map.get("JCMJ");
          Object GXQYY = map.get("GXQYY");
          Object GYSUM = map.get("GYSUM");
          Object GYADD = map.get("GYADD");
          Object CZTR = map.get("CZTR");
          Object CZZC = map.get("CZZC");
          Object DEC = map.get("DEC");
          Object ZDCY = map.get("ZDCY");

          gx.setId(Integer.parseInt(String.valueOf(id)));
          gx.setName(name.toString());
          gx.setJB(JB.toString());
          gx.setDY(DY.toString());
          gx.setYEAR(YEAR.toString());
          gx.setFZR(FZR.toString());
          gx.setTBR(TBR.toString());
          gx.setPhone(phone.toString());
          gx.setEMAIL(EMAIL.toString());
          gx.setWWW(WWW.toString());
          gx.setGXQMJSUM(GXQMJSUM.toString());
          gx.setJCMJ(JCMJ.toString());
          gx.setGXQYY(GXQYY.toString());
          gx.setGYSUM(GYSUM.toString());
          gx.setGYADD(GYADD.toString());
          gx.setCZTR(CZTR.toString());
          gx.setCZZC(CZZC.toString());
          gx.setDEC(DEC.toString());
          gx.setZDCY(ZDCY.toString());

          gxlist.add(gx);
        }
        parseJSONResult(gxlist, response);
      } catch (Exception e) {
        e.printStackTrace();
      }
Nach dem Login kopieren

2. Verzögertes Laden
Da das alte Projekt Struts1 verwendet, gibt es ein Problem mit der Vorderseite. Endformular-Empfangsparameter. Verwenden Sie also direkt das Servlet, um das
Front-End-JSP direkt zu laden. Das JS lautet wie folgt:


function initDatatables(){
  /*var columns = new Array();
  $("#listTable thead th").each(function(index, element) {
    var fieldName=$(element).attr("fieldName");
    if(fieldName.indexOf(&#39;.&#39;)>0)fieldName=fieldName.substring(2);
    columns.push({"data":fieldName});
  }); 
  if($(&#39;#listTable&#39;).length<=0) return;
  //-- 列定义
  var columnDefs = new Array();
  $("#listTable thead th").each(function(index, element) {
    if($(element).attr("fieldType")!=&#39;VARCHAR&#39;){        
      columnDefs.push({        
         "orderable": true, 
         "searchable" : false,
         "targets": index });
    }    
  });*/

  $(&#39;#listTable&#39;).DataTable( {
    "processing": true,//处理中显示
    "serverSide": true,//服务器处理 
    "sScrollY": 300,
    "sScrollX": "100%", 
    "columns":[{"data":"ID"},{"data":"YEAR"},{"data":"REGION"},{"data":"GYZCZ"},{"data":"QYS"}],
    /*"columns":columns,*/
    /*"columnDefs":columnDefs,*/
//   "bInfo": false,
//   "bPaginate": false,
//   "bFilter":false,/servlet/ComplexInquireServlet
//    "bLengthChange": false,
    "ajax": {
      "url": urlContextPath+"/mst/DatatablesLazyLoadServlet?flag=details",
      "type": "POST",
      "data": function ( d ) {
        var queryForm = document.queryConditionForm;                
        d[&#39;fieldCode&#39;] = &#39;ID,YEAR,REGION,GYZCZ,QYS&#39;;
        d[&#39;tableCode&#39;] = &#39;ODS10000030&#39;; //表名
      }
    },
    "oLanguage": {
      "search" : "在表格中搜索:",
      "show" : "显示",
      "sProcessing" : "处理中...",
      "sLengthMenu" : "显示 _MENU_ 项结果",
      "sZeroRecords" : "没有匹配结果",
      "sInfo" : "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
      "sInfoEmpty" : "显示第 0 至 0 项结果,共 0 项",
      "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
      "sInfoPostFix" : "",
      "sSearch" : "搜索:",
      "sUrl" : "",
      "sEmptyTable" : "表中数据为空",
      "sLoadingRecords" : "载入中...",
      "sInfoThousands" : ",",
      "oPaginate" : {
        "sFirst" : "首页",
        "sPrevious" : "上页",
        "sNext" : "下页",
        "sLast" : "末页"
      },
      "oAria" : {
        "sSortAscending" : ": 以升序排列此列",
        "sSortDescending" : ": 以降序排列此列"
      }
    }
  } );
  showPage();
}


function showQueryTable(){
  //建table
  $(&#39;#secondtid&#39;).remove();
  $("#tid").append(
          "<p id=&#39;secondtid&#39; style=&#39;width: 100%;&#39;>" +
          "<table id=&#39;listTable&#39; class=&#39;table table-striped table-bordered table-hover no-footer dataTable display&#39; ><thead><tr>" +
          "<th nowrap>id</th>" +
          "<th nowrap>年份</th>" +
          "<th nowrap>地区</th>" +
          "<th nowrap>工业总产值(万元)</th>" +
          "<th nowrap>企业数(家)</th>" +
          "</tr></thead><tbody></tbody></table>" +
          "</p>");
  //创建表头 
  /*$.ajax({
        url : urlContextPath+&#39;/mst/DatatablesLazyLoadServlet?flag=titles&#39;,// 跳转到 action 
        data : {
          index : &#39;&#39;
        },
        type : &#39;post&#39;,
        success : function(data) {
          var dataObj = eval(data);
        },
        error : function() {
          alert("异常!");
        }
  });*/
  //填充数据
  initDatatables();
}
Nach dem Login kopieren

Hinweis: Dies ist bereits eine vereinfachte Version. Ja, der Tabellenkopf kann mit einem anderen Ajax übergeben werden. Er wird hier weggelassen und zu Tode geschrieben. Das Folgende ist der Backstage-Teil


Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Codebeispiele für das direkte Laden von JQuery-Tabellen und das verzögerte Laden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage