在dataTables.js库中显示“显示N个条目中的1个”,可以通过以下步骤实现:
$(document).ready(function() {
$('#myTable').DataTable();
});
这里的#myTable
是你表格元素的ID,你可以根据实际情况进行修改。
$(document).ready(function() {
$('#myTable').DataTable({
"language": {
"info": "显示 _START_ 到 _END_ 条,共 _TOTAL_ 条",
"infoEmpty": "显示 0 到 0 条,共 0 条",
"infoFiltered": "(从 _MAX_ 条中筛选)",
"lengthMenu": "显示 _MENU_ 条",
"emptyTable": "没有可用数据",
"zeroRecords": "没有匹配的数据"
}
});
});
在上述配置选项中,你可以根据需要修改显示文本的内容。
<div id="myInfo"></div>
然后,在JavaScript代码中,使用dataTables的drawCallback
回调函数来更新这个元素的内容。具体代码如下:
$(document).ready(function() {
$('#myTable').DataTable({
"language": {
// 配置选项...
},
"drawCallback": function(settings) {
var api = this.api();
var pageInfo = api.page.info();
var info = "显示 " + pageInfo.start + " 到 " + pageInfo.end + " 条,共 " + pageInfo.recordsTotal + " 条";
$('#myInfo').text(info);
}
});
});
这样,当你使用dataTables库来显示表格数据时,会在页面上显示类似“显示N个条目中的1个”的信息。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云数据库MySQL、腾讯云对象存储(COS)等。你可以通过腾讯云官方网站获取更多关于这些产品的详细信息和文档。
参考链接:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>联想控股</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap-responsiv.css">
<link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstra.css">
</head>
<body>
领取专属 10元无门槛券
手把手带您无忧上云