首页 > 语言 > JavaScript > 正文

jquery表格datatables实例解析 直接加载和延迟加载

2024-05-06 14:53:13
字体:
来源:转载
供稿:网友

参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选),
由于时间紧,省略了很多,所以总结份简化版的仅供参考。

1、直接加载,这个比较简单,如下

<div id="tid" class="col-sm-12 col-md-12">  <div id="secondtid" hidden="hidden"></div></div>

jsp用了bootstrap的栅格,js如下

<script type="text/javascript">    function getgaoxinqu() {      $('#secondtid').remove();      $("#tid").append(              "<div id='secondtid' style='width: 100%;'><table id='table_id' class='table table-striped table-bordered table-hover no-footer dataTable display' ><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></div>");      $.ajax({            url : '${contextPath}/mst/theme/otherOperatePlatformTheme.do?flag=gaoxinqu',// 跳转到 action             data : {              barName : '1'            },            serverSide: true,//服务器处理             traditional : true,            type : 'post',            success : function(data) {              var dataObj = eval(data);              $('#table_id').DataTable(                      {                        data : dataObj,                        sScrollY: 600,                        sScrollX: '100%',                        columns : [ {                          data : 'id'                        },{                          data : 'name'                        }, {                          data : 'dy'                        }, {                          data : 'gxqyy'                        }, {                          data : 'www'                        }, {                          data : 'gysum'                        }, {                          data : 'gyadd'                        }, {                          data : 'zdcy'                        } , {                          data : 'cztr'                        } , {                          data : 'czzc'                        } ],                        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>            
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选