需要引入的文件
<!-- Custom Fonts -->
<link href="static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- DataTables CSS -->
<link href="static/vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">
<!-- DataTables Responsive CSS -->
<link href="static/vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">
<!-- DataTables JavaScript -->
<script src="static/vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="static/vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="static/vendor/datatables-responsive/dataTables.responsive.js"></script>
完整的代码：
<%@ page language="java" contentType="text/html;charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<Meta name="description" content="">
<Meta name="author" content="">
<!-- DataTables CSS -->
<link href="static/vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="static/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<title>总成列表</title>
<style type="text/css"> /* dataTables列内容居中 */ table>tbody>tr>td{ text-align:center; vertical-align:middle; } /* dataTables表头居中 */ table>thead:first-child>tr:first-child>th{ text-align:center; vertical-align:middle; } </style>
</head>
<body>
<%@ include file="public/home.jsp"%>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" style="width: 100%; margin: 0 auto; margin-top: 35px;">
<div class="panel panel-default">
<div class="panel-heading">总成列表</div>
<!-- /.panel-heading -->
<div class="panel-body">
<!-- Nav tabs -->
<ul class="nav nav-pills">
<li class="active"><a href="#getBm" id="bm" data-toggle="tab">BM</a></li>
<li ><a href="#getCm" id="cm" data-toggle="tab">CM</a>
</li>
<li><a href="#getCs" id="cs" data-toggle="tab">CS</a>
</li>
<li><a href="#getWc" id="wc" data-toggle="tab">WC</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="getBm">
<h4></h4>
<a href="to_ass_add_page" class="btn btn-outline btn-success" style="right: 32px; position: absolute; top: 62.5px; heigth: 40px;"><i class='fa fa-plus'></i>添加</a>
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
<tr>
<th>总成编号</th>
<th>图片</th>
<th>缸径</th>
<th>重量</th>
<th>单价</th>
<th>数量</th>
<th>最后记录人</th>
<th>最后入库时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<!-- /.panel-body -->
</div>
</div>
</div>
</div>
</div>
<!-- /.col-lg-6 -->
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
<script type="text/javascript"> var assName = "BM"; $(function(){ //进入页面获取BM getAllAssembly(); $('#bm').click(function() { window.location.href="get_bm_assembly"; }); $('#cm').click(function() { window.location.href="get_cm_assembly"; }); $('#cs').click(function() { window.location.href="get_cs_assembly"; }); $('#wc').click(function() { window.location.href="get_wc_assembly"; }); //编辑按钮 }); function getAllAssembly() { $('#dataTables-example').dataTable( { "responsive": true,//以下两个参数是为了解决第二次点击按钮的时候tomcat会报错 "retrieve":true,"destroy":true,"autoWidth":false,"columnDefs": [ { "sortable": false,"targets": [ 1,6,8,9] }],//设置某些列不进行排序 "ajax":{ "url" : "get_every_assembly","data" : { ass : assName,pageNum : 1,pageSize : 1000 } },//这个是对应后台传进来的json数据 "columns": [ { "data": "partId" },{ "data": "picture" },{ "data": "diameter" },{ "data": "weight" },{ "data": "price" },{ "data": "number" },{ "data": "userId" },{ "data": "assembleTime" },{ "data": "desc" },{ "data": "tags" } ],//定制的页面显示 "language": { "processing" : "正在获取数据，请稍后...","lengthMenu" : "显示 _MENU_ 条","zeroRecords" : "没有您要搜索的内容","info" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条","infoEmpty" : "记录数为0","infoFiltered" : "(全部记录数 _MAX_ 条)","infoPostFix" : "","search" : "搜索","url" : "","paginate": { "first" : "第一页","prevIoUs" : "上一页","next" : "下一页","last" : "最后一页" } } } ); } </script>
</body>
</html>