0
Привет Я новичок в jQuery и Bootstrap. Я использую таблицы данных для отображаемых данных в табличном формате, но проблема в том, что, когда один столбец данных слишком долго я получаю горизонтальную полосу прокрутки, как показано на рисунке ниже:Я использовал таблицы данных для списка, заселенного в JSP-файле, и в файле jsp Список не отображается правильно
ниже мой код:
<!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>
Мне не нужна полоса прокрутки. У любого есть идея, как разбить значения столбцов в 2 или более строках, значит, в изображении выше есть столбец MerchantID, и я хочу показать данные в этом столбце в двух или более строках.
Есть ли какое-либо свойство в таблицах данных, которое уменьшает ширину конкретного столбца?
Пожалуйста, кто-нибудь может помочь мне получить это? Заранее спасибо.
, пожалуйста, поделитесь соответствующим кодом –
. Я делюсь своим кодом, вы можете пройти через него и найти решение, имеющее отношение к моей проблеме. –