Javascript 我使用数据表来表示JSP文件中填充的列表和JSP文件中未正确显示的列表
嗨，我是jQuery和Bootstrap的新手。我使用数据表以表格式显示数据，但问题是当一列数据太长时，我会得到水平滚动条，如下图所示： 下面是我的代码：Javascript 我使用数据表来表示JSP文件中填充的列表和JSP文件中未正确显示的列表,javascript,jquery,css,jsp,twitter-bootstrap-3,Javascript,Jquery,Css,Jsp,Twitter Bootstrap 3,嗨，我是jQuery和Bootstrap的新手。我使用数据表以表格式显示数据，但问题是当一列数据太长时，我会得到水平滚动条，如下图所示： 下面是我的代码： <!DOCTYPE html> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> &l
<!DOCTYPE html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>
<html lang="en">
<head>
<jsp:directive.include file="include_metatags.jsp" />
<title><s:message code="app.title.transactionlist" arguments="${applicationScope['APPLICATION_HEADER_TEXT']}"/></title>
<jsp:directive.include file="include_head.jsp" />
<link href="resources/css/datatables.min.css" rel="stylesheet">
<style>
body,html{
background-image : url("resources/img/xyymm/home.jpg");
background-attachment : fixed;
background-position : center center;
background-size : cover;
}
</style>
</head>
<body>
<jsp:include page="menu.jsp">
<jsp:param value="transactions" name="currentpage" />
</jsp:include>
<div class="container amo2">
<div class="card card-container2">
<img id="profile-img" class="profile-img-card" src="resources/img/xyymm/fintech_img.png">
<h4 style="margin-bottom:20px;">
<s:message code="label.list.transaction"/>
</h4>
<div class="container-fluid mer table-responsive" id="wht">
<ol class="breadcrumb">
<li><a href="home"><s:message code="app.link.home"/></a></li>
<li class="active"><s:message code="form.home.transactionList"/></li>
</ol>
<jsp:directive.include file="alertMessage.jsp" />
<div class="body-content">
<table border="1" id="transactions" class="table table-striped table-responsive dataTable no-footer dtr-inline" role="grid" aria-describedby="transactions_info">
<thead>
<tr>
<td><s:message code="form.transactionlist.transactionId"/></td>
<td><s:message code="form.transactionlist.merchantId"/></td>
<td><s:message code="form.transactionlist.invoiceNumber"/></td>
<td><s:message code="form.transactionlist.amount"/></td>
<td><s:message code="form.transactionlist.currency"/></td>
<td><s:message code="form.transactionlist.paymentGateway"/></td>
<td><s:message code="form.transactionlist.orderStatus"/></td>
<td><s:message code="form.transactionlist.createdDate"/></td>
</tr>
</thead>
<tbody>
<c:forEach var="transaction" items="${transactionList}">
<tr>
<td>
<a href="#transactionView" id="transactionsPopup" data-toggle="modal" data-target=".bs-example-modal-lg"
onclick="viewTransactionDetails('${transaction.transactionId}')">
${transaction.transactionId}
</a>
</td>
<td>${transaction.merchantId}</td>
<td>${transaction.invoiceNum}</td>
<td>${transaction.amount}</td>
<td>${transaction.currency}</td>
<td>${transaction.domainName}</td>
<td>${transaction.orderStatus}</td>
<td>${transaction.createdDate}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
<jsp:include page="transactionListPopup.jsp">
<jsp:param name="divID" value="transactionView" />
</jsp:include>
<jsp:directive.include file="include_body_scripts.jsp" />
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="resources/js/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#transactions').DataTable({
"order": [[7,"asc"]],
responsive: true,
"autoWidth": false,
"columnDefs": [
{
"width" : "10%",
"targets": [ 7 ],
"visible": false
},
{
"width" : "5%",
"targets": [ 1 ],
"visible": false
}
]
}
);
} );
function viewTransactionDetails(transactionId) {
return $.ajax({
url: 'transactions',
type: 'GET',
data: {"transactionId" : transactionId},
dataType: "json",
success: function (item) {
var trMerchantHTML = 'Merchant ID - '+ item.merchantId;
var trEmailHTML = 'Pay From Email - '+ item.payFromEmail;
var trFirstHTML = 'First Name - '+ item.firstName;
var trLastHTML = 'Last Name - '+ item.lastName;
var trRelayHTML = 'Relay URL - '+ item.relayUrl;
var trInvoiceHTML = 'Invoice Number - '+ item.invoiceNum;
var trAmountHTML = 'Amount - '+ item.amount;
var trCustomerHTML = 'Customer ID - '+ item.customerId;
var trIPHTML = 'IP Address - '+ item.ipAddress;
var trCurrencyHTML = 'Currency - '+ item.currency;
var trDomainHTML = 'Domain Name - '+ item.domainName;
var trOrdersHTML = 'Order Status - '+ item.orderStatus;
var trRedirectHTML = 'Is Redirect - '+ item.isredirect;
var trTransMsgHTML = 'Transaction Message - '+ item.txn_message;
var trMerchOrderIdHTML = 'Merchant Order ID - '+ item.merch_order_id;
var trMerchTransIdHTML = 'Merchant Transaction ID - '+ item.merch_txn_id;
var trActionHTML = 'Action - '+ item.action;
$('#merchantID').html(trMerchantHTML);
$('#payFromEmailID').html(trEmailHTML);
$('#firstNameID').html(trFirstHTML);
$('#lastNameID').html(trLastHTML);
$('#relayUrlID').html(trRelayHTML);
$('#invoiceNumberID').html(trInvoiceHTML);
$('#amountID').html(trAmountHTML);
$('#customerID').html(trCustomerHTML);
$('#ipAddressID').html(trIPHTML);
$('#currencyID').html(trCurrencyHTML);
$('#domainNameID').html(trDomainHTML);
$('#orderStatusID').html(trOrdersHTML);
$('#isRedirectID').html(trRedirectHTML);
$('#txnMessage').html(trTransMsgHTML);
$('#merchantOrderID').html(trMerchOrderIdHTML);
$('#merchantTransID').html(trMerchTransIdHTML);
$('#action').html(trActionHTML);
},
error: function() {
$('#transactionView_Table ').html('<p>An error has occurred.</p>');
}
});
}
</script>
</body>
</html>
正文，html{
背景图片：url（“resources/img/xyymm/home.jpg”）；
背景附件：固定；
背景位置：中心；
背景尺寸：封面；
}
${transaction.merchantId}
${transaction.invoiceNum}
${transaction.amount}
${transaction.currency}
${transaction.domainName}
${transaction.orderStatus}
${transaction.createdDate}
$（文档）.ready（函数（）{
$（“#事务”）。数据表({
“订单”：[[7，“asc”]，
回答：是的，
“自动宽度”：false，
“columnDefs”：[
{
“宽度”：“10%”，
“目标”：[7]，
“可见”：错误
},
{
“宽度”：“5%”，
“目标”：[1]，
“可见”：错误
}
]
}
);
} );
函数viewTransactionDetails（transactionId）{
返回$.ajax({
url:'交易'，
键入：“GET”，
数据：{“transactionId”：transactionId}，
数据类型：“json”，
成功：功能（项目）{
var trMerchantHTML='Merchant ID-'+item.merchantId；
var trEmailHTML='Pay From Email-'+item.payfrom Email；
var trFirstHTML='First Name-'+item.firstName；
var trLastHTML='Last Name-'+item.lastName；
var trRelayHTML='中继URL-'+item.relayUrl；
var trInvoiceHTML='发票编号-'+item.invoiceNum；
var trAmountHTML='Amount-'+item.Amount；
var trCustomerHTML='Customer ID-'+item.customerId；
var trIPHTML='IP地址-'+item.ipAddress；
var trCurrencyHTML='Currency-'+item.Currency；
var trDomainHTML='Domain Name-'+item.domainName；
var trOrdersHTML='订单状态-'+item.orderStatus；
var trRedirectHTML='Is Redirect-'+item.isredirect；
var trtransmsgsghtml='Transaction Message-'+item.txn_Message；
var trMerchOrderIdHTML='商户订单ID-'+item.merch_订单ID；
var trMerchTransIdHTML='Merchant Transaction ID-'+item.merch_txn_ID；
var trActionHTML='Action-'+item.Action；
$（'#merchantID'）.html（trMerchantHTML）；
$（'#payFromEmailID'）.html（trEmailHTML）；
$（'#firstNameID'）.html（trFirstHTML）；
$（'#lastNameID'）.html（trLastHTML）；
$（'relayUrlID'）.html（trRelayHTML）；
$（'#invoiceNumberID'）.html（trInvoiceHTML）；
$（'#amountID'）.html（trAmountHTML）；
$（'#customerID'）.html（trCustomerHTML）；
$（'#ipAddressID'）.html（trIPHTML）；
$（'#currencyID'）.html（trCurrencyHTML）；
$（'#domainNameID'）.html（trDomainHTML）；
$（'#ordersstatusid'）.html（trOrdersHTML）；
$（'#isRedirectID'）.html（trRedirectHTML）；
$（'#txnMessage'）.html（trTransMsgHTML）；
$（'#merchantOrderID'）.html（trMerchOrderIdHTML）；
$（'#merchantTransID'）.html（trMerchTransIdHTML）；
$（'#action'）.html（trActionHTML）；
},
错误：函数（）{
$（“#transactionView_Table”）.html（“发生错误。”）；
}
});
}
<td>${transaction.merchantId}</td>
<td style="word-break: break-all;word-break: breakword;width:15%;"> ${transaction.merchantId}</td>