参考自官方文档,需要引入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>
新闻热点
疑难解答
图片精选