bootstrap Table 的使用
<%@page import="java.util.Enumeration"%> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page isELIgnored="false"%> <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <meta name="description" content=""> <meta name="author" content=""> <meta http-equiv="expires" content="0"> <title>Preset Remove</title> <link href="${pageContext.request.contextPath}/static/css/jumbotron-narrow.css" rel="stylesheet"> <link href="${pageContext.request.contextPath}/static/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath}/static/jquery/jquery.min.js"></script> <script src="${pageContext.request.contextPath}/static/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <script src="${pageContext.request.contextPath}/static/bootstrap-table/bootstrap-table.min.js"></script> <link href="${pageContext.request.contextPath}/static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"> <script src="${pageContext.request.contextPath}/static/jquery/ie-emulation-modes-warning.js"></script> <script src="${pageContext.request.contextPath}/static/jquery/ie10-viewport-bug-workaround.js"></script> <script src="${pageContext.request.contextPath}/static/layer/layer.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css" > <link rel="stylesheet" href="${pageContext.request.contextPath}/static/jquery-easyui-1.3.5/themes/icon.css" type="text/css"> </head> <body> <div class="container"> <div class="row marketing"> <h2 class="sub-header">Preset列表</h2> <div class="table-responsive"> <table id="presetTable"> </table> </div> </div> </div> <script type="text/javascript"> $(function() { $('#presetTable') .bootstrapTable( { method : 'get', url : '${pageContext.request.contextPath}/preset/getList', cache : false, height : 500, striped : true, pagination : true, pageSize : 10, pageList : [ 10, 30, 50, 100, 200 ], formatNoMatches : function() { return 'N/A'; }, formatLoadingMessage : function() { return '加载中, 请稍后...'; }, formatRecordsPerPage : function(pageNumber) { return sprintf('每页显示 %s 记录', pageNumber); }, formatShowingRows : function(pageFrom, pageTo, totalRows) { return sprintf('显示 %s 到 %s ,总共 %s 条', pageFrom, pageTo, totalRows); }, onLoadSuccess : function(data) { }, columns : [ { field : 'item', title : '#', align : 'center', valign : 'middle' }, { field : 'cameraid', title : 'CameraId', align : 'center', valign : 'middle' }, { field : 'name', title : 'Name', align : 'center', valign : 'middle' }, { field : 'presetid', title : 'PresetId', align : 'center', valign : 'middle' }, { title: "操作", align: 'center', valign: 'middle', formatter: function (value, row, index) { var button = '<button class="btn btn-danger btn-sm" onclick="setRemove(' + row.presetid + ')">删除</button>'; return button; } } ] }); setInterval("refreshList()", 5000);//5秒钟一次 }); function setRemove(presetid) { layer.confirm('确认删除?', { btn: ['确定','取消'] }, function(index){ $.ajax({ type : "GET", url : "${pageContext.request.contextPath}/preset/setRemove", dataType : 'json', data : {"presetId":presetid}, cache : false,//清除缓存 success : function(data) { if(data == "OK"){ refreshList(); }else{ layer.msg("删除错误"+data, {icon: 2}); } } }); layer.close(index); }, function(){ }); } function refreshList() { $('#presetTable') .bootstrapTable( 'refresh', { url : '${pageContext.request.contextPath}/preset/getList', silent : true }); } </script> </body> </html>