javascript - 如何使用带有滚动搜索和分页选项的动态标题制作 bootstrap4 数据表
问题描述
我正在尝试从带有动态标头的 JSON 数据制作一个 Datatable 不是静态的但没有成功我只想div
在表格标签中呈现表格,因为在 div 标签中它填充在看起来不错的完整表格上ui
如果有人有任何想法,我不知道如何使用动态标题来制作它,请帮助我
var data=[
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
},
{
"amount": 321797,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR"
},
{
"amount": 64431,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM"
},
{
"amount": 57352,
"billdate": "2018-08-09",
"outlet": "KOLAR"
},
{
"amount": 323556,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR"
},
{
"amount": 58772,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM"
},
{
"amount": 43722,
"billdate": "2018-08-10",
"outlet": "KOLAR"
},
{
"amount": 464127,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR"
},
{
"amount": 93110,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM"
},
{
"amount": 62213,
"billdate": "2018-08-11",
"outlet": "KOLAR"
},
{
"amount": 626772,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR"
},
{
"amount": 126933,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM"
},
{
"amount": 63119,
"billdate": "2018-08-12",
"outlet": "KOLAR"
},
{
"amount": 167391,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR"
},
{
"amount": 27110,
"billdate": "2018-08-13",
"outlet": "KOLAR"
},
{
"amount": 275115,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR"
},
{
"amount": 58633,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM"
},
{
"amount": 37920,
"billdate": "2018-08-14",
"outlet": "KOLAR"
}
];
var columndef=[{title:"amount",data:"amount"},{title:"billdate",data:"billdate"},{title:"outlet",data:"outlet"}];
$('#tbl').DataTable({
columns:columndef,
data : data,
scrollY: '30vh',
scrollCollapse: true,
paging: true,
"columnDefs" : [ {
"targets" : [0],
className : 'dt-body-left',
"render" : function(data, type, row) {
return Number(data).toLocaleString('en-IN', {
maximumFractionDigits : 2,
});
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.css"/>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/sc-1.5.0/datatables.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="tbl"></table>
我编辑了我的片段
解决方案
var data=[
{
"amount": 518212,
"billdate": "2018-08-04",
"outlet": "JAYANAGAR"
},
{
"amount": 104801,
"billdate": "2018-08-04",
"outlet": "MALLESHWARAM"
},
{
"amount": 138151,
"billdate": "2018-08-04",
"outlet": "KOLAR"
},
{
"amount": 628358,
"billdate": "2018-08-05",
"outlet": "JAYANAGAR"
},
{
"amount": 115223,
"billdate": "2018-08-05",
"outlet": "MALLESHWARAM"
},
{
"amount": 134107,
"billdate": "2018-08-05",
"outlet": "KOLAR"
},
{
"amount": 177866,
"billdate": "2018-08-06",
"outlet": "JAYANAGAR"
},
{
"amount": 66095,
"billdate": "2018-08-06",
"outlet": "KOLAR"
},
{
"amount": 284069,
"billdate": "2018-08-07",
"outlet": "JAYANAGAR"
},
{
"amount": 58789,
"billdate": "2018-08-07",
"outlet": "MALLESHWARAM"
},
{
"amount": 67886,
"billdate": "2018-08-07",
"outlet": "KOLAR"
},
{
"amount": 313128,
"billdate": "2018-08-08",
"outlet": "JAYANAGAR"
},
{
"amount": 59939,
"billdate": "2018-08-08",
"outlet": "MALLESHWARAM"
},
{
"amount": 68558,
"billdate": "2018-08-08",
"outlet": "KOLAR"
},
{
"amount": 321797,
"billdate": "2018-08-09",
"outlet": "JAYANAGAR"
},
{
"amount": 64431,
"billdate": "2018-08-09",
"outlet": "MALLESHWARAM"
},
{
"amount": 57352,
"billdate": "2018-08-09",
"outlet": "KOLAR"
},
{
"amount": 323556,
"billdate": "2018-08-10",
"outlet": "JAYANAGAR"
},
{
"amount": 58772,
"billdate": "2018-08-10",
"outlet": "MALLESHWARAM"
},
{
"amount": 43722,
"billdate": "2018-08-10",
"outlet": "KOLAR"
},
{
"amount": 464127,
"billdate": "2018-08-11",
"outlet": "JAYANAGAR"
},
{
"amount": 93110,
"billdate": "2018-08-11",
"outlet": "MALLESHWARAM"
},
{
"amount": 62213,
"billdate": "2018-08-11",
"outlet": "KOLAR"
},
{
"amount": 626772,
"billdate": "2018-08-12",
"outlet": "JAYANAGAR"
},
{
"amount": 126933,
"billdate": "2018-08-12",
"outlet": "MALLESHWARAM"
},
{
"amount": 63119,
"billdate": "2018-08-12",
"outlet": "KOLAR"
},
{
"amount": 167391,
"billdate": "2018-08-13",
"outlet": "JAYANAGAR"
},
{
"amount": 27110,
"billdate": "2018-08-13",
"outlet": "KOLAR"
},
{
"amount": 275115,
"billdate": "2018-08-14",
"outlet": "JAYANAGAR"
},
{
"amount": 58633,
"billdate": "2018-08-14",
"outlet": "MALLESHWARAM"
},
{
"amount": 37920,
"billdate": "2018-08-14",
"outlet": "KOLAR"
}
];
var columndef=[{title:"amount",data:"amount"},{title:"billdate",data:"billdate"},{title:"outlet",data:"outlet"}];
$('#tbl').DataTable({
columns:columndef,
data : data,
scrollY: '50vh',
scrollCollapse: true,
paging: false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tbl"></table >
您应该将div
元素更改为表格并创建动态表格定义。希望这可以帮助。
推荐阅读
- arm - 复位后的 ARM PC 值
- sql - bigrquery 中的 percentile_cont
- json - 在rest api yii2中返回html
- vhdl - 具有两个输入和一个输出的 Mealy 机器的 VHDL 代码
- azure - 如何编码以句点结尾的 blob 名称?
- php - PHP:如何为排队的 Laravel 作业清除大量静态变量?
- javascript - mousemove 不起作用仅在单击时运行
- python-3.x - 字符串的条件排列
- gcc - libavcodec.a(vc1dsp_mmx.o):针对符号“ff_pw_9”重定位 R_X86_64_PC32
- regex - 使用 cpp11 正则表达式时出现正则表达式错误