el表達(dá)式 寫(xiě)入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼
el表達(dá)式,寫(xiě)入bootstrap表格,簡(jiǎn)化代碼,效果圖:
不多說(shuō),上干貨:
<%@ 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í)庫(kù)</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í)庫(kù)管理</a></li> <li><a href="/receiverShow/findKnowRevi_el.action#container">知識(shí)庫(kù)審核</a></li> <li><a href="/receiverShow/findAskManagement_el.action#container1">提問(wèn)管理</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>分類(lèi)</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('拒絕通過(guò)'); } }, 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á)式 寫(xiě)入bootstrap表格數(shù)據(jù)頁(yè)面的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(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)文章
Javascript函數(shù)式編程簡(jiǎn)單介紹
什么是函數(shù)式編程?根據(jù)百度百科的描述,“函數(shù)式編程是種編程典范,它將電腦運(yùn)算視為函數(shù)的計(jì)算。函數(shù)編程語(yǔ)言最重要的基礎(chǔ)是 λ 演算(lambda calculus)。而且λ演算的函數(shù)可以接受函數(shù)當(dāng)作輸入(參數(shù))和輸出(返回值)。”2015-10-10javascript如何用遞歸寫(xiě)一個(gè)簡(jiǎn)單的樹(shù)形結(jié)構(gòu)示例
本篇文章主要介紹了javascript如何用遞歸寫(xiě)一個(gè)簡(jiǎn)單的樹(shù)形結(jié)構(gòu)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09js抽獎(jiǎng)實(shí)現(xiàn)隨機(jī)抽獎(jiǎng)代碼效果
這篇文章主要介紹了js隨機(jī)抽獎(jiǎng)代碼效果,大家參考使用2013-12-12JavaScript手寫(xiě)一個(gè)前端存儲(chǔ)工具庫(kù)
在項(xiàng)目開(kāi)發(fā)的過(guò)程中,為了減少提高性能,減少請(qǐng)求,開(kāi)發(fā)者往往需要將一些不易改變的數(shù)據(jù)放入本地緩存中。本文就來(lái)用JavaScript手寫(xiě)一個(gè)前端存儲(chǔ)工具庫(kù),希望對(duì)大家有所幫助2023-02-02小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)文字循環(huán)滾動(dòng)動(dòng)畫(huà),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06基于JS實(shí)現(xiàn)禁止查看源碼及獲取鍵盤(pán)的按鍵值
這篇文章主要介紹了基于JS實(shí)現(xiàn)禁止查看源碼及獲取鍵盤(pán)的按鍵值,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02javascript正則表達(dá)式基礎(chǔ)知識(shí)入門(mén)
很長(zhǎng)時(shí)間沒(méi)看正則表達(dá)式了,碰巧今天用到,溫故知新了一把,這里記錄下來(lái),分享給大家,都是些基礎(chǔ)的知識(shí),重點(diǎn)給大家講解的是正則表達(dá)式中4種常用的方法,50% 的舉一反三練習(xí)中的原創(chuàng)。2015-04-04JavaScript+html5 canvas繪制漸變區(qū)域完整實(shí)例
這篇文章主要介紹了JavaScript+html5 canvas繪制漸變區(qū)域的方法,結(jié)合完整實(shí)例形式分析了canvas顏色調(diào)用與圖形繪制的相關(guān)技巧,需要的朋友可以參考下2016-01-01