el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁面的實(shí)例代碼
更新時(shí)間：2017年01月11日 15:30:40 作者：Java軟件小白
這篇文章主要介紹了el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁面的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
el表達(dá)式，寫入bootstrap表格，簡化代碼，效果圖：
不多說，上干貨：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>知識(shí)庫</title>
<link rel="stylesheet" href="<%=basePath %>knowledge-bs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%=basePath %>knowledge-bs/css/bootstrap-table.min.css">
<link href="<%=basePath %>knowledge-bs/css/toastr.css" rel="stylesheet" />
<link href="<%=basePath %>knowledge-bs/css/sweetalert.css" rel="stylesheet" />
<script src="<%=basePath %>knowledge-bs/js/jquery.min.js"></script>
<script src="<%=basePath %>knowledge-bs/js/sweetalert.min.js"></script>
<script src="<%=basePath %>knowledge-bs/js/bootstrap.min.js"></script>
<script src="<%=basePath %>knowledge-bs/js/tableExport.js"></script>
<script src="<%=basePath %>knowledge-bs/js/jquery.base64.js"></script>
<script src="<%=basePath %>knowledge-bs/js/bootstrap-table.js"></script>
<script src="<%=basePath %>knowledge-bs/js/bootstrap-table-export.js"></script>
<script src="<%=basePath %>knowledge-bs/js/toastr.js"></script>
<style type="text/css">
#reportTableDiv td{height: 50px; text-align: center; line-height: 50px; width: auto;}
#reportTableDiv th{height: 50px; text-align: center; line-height: 50px; width: auto;}
</style>
</head>
<body>
<jsp:include page="zsfktck.jsp"></jsp:include>
<center>
<div id="container" style="padding-top: 30px;padding-right: 60px;padding-left: 60px;margin-right: auto;margin-left: auto;height:auto">
<ul id="myTab" class="nav nav-tabs">
<li><a href="/receiverShow/knowledge-bs/knowledge.html#container">知識(shí)庫管理</a></li>
<li><a href="/receiverShow/findKnowRevi_el.action#container">知識(shí)庫審核</a></li>
<li><a href="/receiverShow/findAskManagement_el.action#container1">提問管理</a></li>
</ul>
<div style="padding-left: 50px;">
<table>
<thead>
<tr>
<td style="padding-left: 30px;"><label>關(guān)鍵字</label></td>
<td style="padding-left: 10px;"><input type="text" class="form-control" aria-describedby="sizing-addon2" id="keyword" value="" placeholder="請(qǐng)輸入關(guān)鍵字"/></td>
<td style="padding-left: 120px;"><label>標(biāo)題</label></td>
<td style="padding-left: 10px;"><input type="text" class="form-control" aria-describedby="sizing-addon2" id="title" value="" placeholder="請(qǐng)輸入標(biāo)題"/></td>
<td style="padding-left: 120px;"><label>內(nèi)容</label></td>
<td style="padding-left: 10px;"><input type="text" class="form-control" aria-describedby="sizing-addon2" id="content" value="" placeholder="請(qǐng)輸入內(nèi)容"/></td>
</tr>
</thead>
</table>
<div style="padding-top: 10px;">
<button id="serch" class="btn btn-info">查詢</button>
<button id="reset" class="btn btn-primy">重置</button>
</div>
</div>
<div id="reportTableDiv" class="span10">
<table class="table table-hover" id="tablepos">
<thead>
<tr>
<th>標(biāo)題</th>
<th>分類</th>
<th>關(guān)鍵字</th>
<th>點(diǎn)擊數(shù)</th>
<th>提交時(shí)間</th>
<th>詳情</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach var="list" items="${protectLists}">
<tr>
<td>${list.title }</td>
<td>${list.classification }</td>
<td>${list.keyword }</td>
<td>${list.clicks}</td>
<td>${list.committime}</td>
<td><a data-toggle="modal" data-target="#myModal" class="details_button" name="${list.title },${list.clicks},${list.committime},${list.contentss}">詳情</a>
</td>
<td><a data-toggle="modal" data-target="#myModal" class="review_button" name="${list.title },${list.clicks},${list.committime},${list.contentss},${list.id },">審核</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</center>
</body>
<script type="text/javascript">
$('#serch').click(function () {
$.ajax({
type: "POST",
url: "findKnowRevi_el.action",
success: function (data,msg) {
if(msg == "success"){
window.location.href="<%=basePath %>findKnowRevi_el.action?"+"workOrderTDTO1.keyword=" + escape($('#keyword').val()) + "&workOrderTDTO1.title=" + escape($('#title').val())+ "&workOrderTDTO1.content=" + escape($('#content').val());
}
},
error: function (XMLHttpRequest, textStatus, thrownError) {
alert('模塊加載異常！');
}
});
});
$('#reset').click(function(){
$('#keyword').val("");
$('#title').val("");
$('#content').val("");
});
$(".review_button").click(function(){
var id ;
$("#myModalLabel_content").text("知識(shí)反饋");
var str=$(this).attr("name");
strs=str.split(","); //字符分割
for (i=0;i<strs.length ;i++ ){
$("#txt_title_details").val(strs[0]);
$("#txt_clicks_details").val(strs[1]);
$("#txt_committime_details").val(strs[2]);
$("#txt_content_details_sub").val(strs[3]);
id =strs[4];
};
$('#myModal_content').modal();
$("#button_sub").removeClass("hidden");
$("#button_sub").addClass("modal-footer");
$("#btn_submit_content").click(function(){
$.ajax({
type: "POST",
url: "agreeExamine.action",
data: "knowledge.id=" +id,
success: function (data,msg) {
if(msg == "success"){
$('#myModal_content').modal('hide');
window.location.href="<%=basePath %>findKnowRevi_el.action";
toastr.success('審核成功');
}
},
error: function (XMLHttpRequest, textStatus, thrownError) {
alert('模塊加載異常！');
}
});
});
$("#btn_refuse").click(function(){
$.ajax({
type: "POST",
url: "deleteKnowExamine.action",
data: "id=" +id,
success: function (data,msg) {
if(msg == "success"){
$('#myModal_content').modal('hide');
window.location.href="<%=basePath %>findKnowRevi_el.action";
toastr.success('拒絕通過');
}
},
error: function (XMLHttpRequest, textStatus, thrownError) {
alert('模塊加載異常！');
}
});
});
});
$(".details_button").click(function(){
var str=$(this).attr("name");
strs=str.split(","); //字符分割
for (i=0;i<strs.length ;i++ ){
$("#txt_title_details").val(strs[0]);
$("#txt_clicks_details").val(strs[1]);
$("#txt_committime_details").val(strs[2]);
$("#txt_content_details_sub").val(strs[3]);
};
$("#myModalLabel_content").text("");
$('#myModal_content').modal();
$("#button_sub").addClass("hidden");
});
</script>
</html>
以上所述是小編給大家介紹的el表達(dá)式 寫入bootstrap表格數(shù)據(jù)頁面的實(shí)例代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- BootStrap Fileinput插件和Bootstrap table表格插件相結(jié)合實(shí)現(xiàn)文件上傳、預(yù)覽、提交的導(dǎo)入Excel數(shù)據(jù)操作步驟
- Angualrjs和bootstrap相結(jié)合實(shí)現(xiàn)數(shù)據(jù)表格table
- bootstrap table 數(shù)據(jù)表格行內(nèi)修改的實(shí)現(xiàn)代碼
- bootstrap jquery dataTable 異步ajax刷新表格數(shù)據(jù)的實(shí)現(xiàn)方法
- Bootstrap Table表格一直加載(load)不了數(shù)據(jù)的快速解決方法
- BootStrap數(shù)據(jù)表格實(shí)例代碼
相關(guān)文章
本文給大家分享的是使用正則表達(dá)式檢測(cè)只含有漢字、數(shù)字、字母、下劃線等示例，非常的簡單實(shí)用，這里推薦給大家，有需要的小伙伴參考下。2015-04-04
了解Javascript中函數(shù)作為對(duì)象的魅力
這篇文章主要介紹了了解Javascript中函數(shù)作為對(duì)象的魅力,javascript中函數(shù)可以有屬性，可以有方法， 可以享有所有對(duì)象所擁有的特性。并且最重要的，她還可以直接被調(diào)用,需要的朋友可以參考下2019-06-06
幾款極品的javascript壓縮混淆工具...2007-05-05
JS實(shí)現(xiàn)萬億數(shù)字轉(zhuǎn)中文的代碼詳解
在軟件開發(fā)中,尤其是在中文處理的場(chǎng)景中,數(shù)字與語言的轉(zhuǎn)換是一個(gè)常見且具有挑戰(zhàn)性的任務(wù),在一些業(yè)務(wù)系統(tǒng)中,可能需要將阿拉伯?dāng)?shù)字轉(zhuǎn)換為中文數(shù)字,本文將介紹如何使用 JavaScript 將數(shù)字轉(zhuǎn)換成中文,幫助開發(fā)者為相關(guān)的需求提供實(shí)現(xiàn)思路,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了最常用的三款JS時(shí)間特效，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
使用JavaScript獲取URL中的參數(shù)(兩種方法)
這篇文章主要介紹了使用JavaScript獲取URL中的參數(shù)(兩種方法)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)
“繼承”是面向?qū)ο缶幊汤锩娼?jīng)常提及到的概念，它的目的是實(shí)現(xiàn)代碼復(fù)用。這篇文章主要介紹了聊聊JavaScript如何實(shí)現(xiàn)繼承及特點(diǎn)，有興趣的可以了解一下。2017-04-04
javascript導(dǎo)出csv文件（excel）的方法示例
這篇文章主要給大家介紹了關(guān)于javascript導(dǎo)出csv文件（excel）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Code：loadScript( )加載js的功能函數(shù)
Code：loadScript( )加載js的功能函數(shù)...2007-02-02
微信小程序?qū)崿F(xiàn)長按 識(shí)別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長按 識(shí)別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個(gè)屬性就可以了,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01