bootstrap+datatable实现datatable之切换tab
前言
新手完成，内容比较简单，但是解决了一些小问题可以参考参考。
提示：以下是本篇文章正文内容，下面案例可供参考
导入的js可以参考下面提供的参考文件，我的JS引入很多参考价值不大。
下面提供主要的代码
view部分（主要部分）
@csrf_exempt
def Status_wait(request):
if request.method == "POST":
status = request.POST.get("status")
print(status)
list=[]
data_list = {}
if status == '0':
Orders = OrdersList.objects.filter(listState_id='1').all()
for order in Orders:
list.append({"orderId": order.orderID,
"name": order.orderClient.clientName,
"serialNumber": order.orderSerialNum,
"orderTime": order.orderingTime.strftime("%Y-%m-%d %H:%M:%S"),
"endTime": order.serviceDate.strftime("%Y-%m-%d"),
"status": order.listState.state,})
data_list['data'] = list
print(json.dumps(data_list))
return HttpResponse(json.dumps(data_list))
return HttpResponse(json.dumps(data_list))
js部分，因为我的几个tab都是一样的内容所以我只调用了一个datatable
建议ajax传值datatype为json的时候，能转json还是转一下，不然传不过去的
因为datatables不允许多次初始化某一表格
所以建议加上
destory:true,
retrieve: true，表示我已经知道初始化选项不能在初始化之后更改，只是希望返回DataTable实例（这部分报错具体信息可以参考下面链接）
如果有返回回来有空值，需要在”columns”的data下面加上”defaultContent”: “”不然会报错。
$(function (){
initData()
$('.nav-tabs li').on('click',function(){
setTimeout(initData, 50);
initData()
});
});
#用于判断li是否是被点击的状态
function initData(){
var len = $("ul li[class=nav-item]").length
var index
for(var i=0 ;i<len;i++) { if ($("li[class="nav-item]:eq("+i+")"> a").attr("aria-selected") == 'true') {
index = i;
console.log(index)
messageinfo(index);
}
}
}
function messageinfo(value){
$("#datatable"+value).addClass("data-table table hover multiple-select-row nowrap")
table = $("#datatable"+value).dataTable({
"ajax": {
url: "/wait/",
type: 'POST',
data: {
status: parseInt(value)
},
},
destory:true,
retrieve:true,
"oLanguage": {
oAria: {
sSortAscending: ": activate to sort column ascending",
sSortDescending: ": activate to sort column descending"
},
oPaginate: {
sFirst: "首页",
sLast: "末页",
sNext: "下一页",
sPrevious: "上一页"
},
sEmptyTable: "该表没有数据",
sInfo: "从 _START_ 到 _END_ 共 _TOTAL_ ",
sInfoEmpty: "从 0 到 0 共 0 条",
sInfoFiltered: "(从 _MAX_ 条中过滤)",
sInfoPostFix: "",
sDecimal: "",
sThousands: ",",
sLengthMenu: "一页 _MENU_ 条",
sLoadingRecords: "加载中...",
sProcessing: "处理中...",
sSearch: "搜索:",
sSearchPlaceholder: "",
sUrl: "",
sZeroRecords: "没有匹配的信息"
},
"columns": [
{
根据你的需求写就好
}
{
"data":null,
"defaultContent": "<div class="dropdown">"+
"<a class="btn btn-link font-24 p-0 line-height-1 no-arrow dropdown-toggle" href="#" role="button" data-toggle="dropdown">"
+""+"</a>"+
"<div class="dropdown-menu dropdown-menu-right dropdown-menu-icon-list">"+
"<a class="dropdown-item" href="#"> 查看</a>"+
"<a class="dropdown-item" href="#"> 修改</a>"+
"<a class="dropdown-item" href="#"> 删除</a></div></div>"
}
]
});
}
</len;i++)>
html部分
根据需要写就是了，因为我加了样式，出来结果应该和我不一样
<div class="tab">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active text-blue" data-toggle="tab" href="#checked" role="tab" aria-selected="true">确认订单</a>
</li>
<li class="nav-item">
<a class="nav-link text-blue" data-toggle="tab" href="#delivered" role="tab" aria-selected="false">订单发货</a>
</li>
......
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="checked" role="tabpanel">
<div class="pd-20">
<table id="datatable0">
<thead>
<tr>
<th>订单编号</th>
<th>客户名称</th>
<th>订单流水号</th>
<th>下单日期</th>
<th>交货日期</th>
<th>订单状态</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="tab-pane fade" id="delivered" role="tabpanel">
<div class="pd-20">
<table id="datatable1">
<thead>
<tr>
<th>订单编号</th>
<th>客户名称</th>
<th>订单流水号</th>
<th>下单日期</th>
<th>交货日期</th>
<th>订单状态</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
后面可以按照这样加table
</div>
最后成果就是这样了
Original: https://blog.csdn.net/Q1070999087/article/details/121896058
Author: 白日梦想家.。
Title: bootstrap+datatable实现datatable之切换tab
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/734472/
转载文章受原作者版权保护。转载请注明原作者出处！