javascript - 如何将索引列添加到数据表
问题描述
我正在尝试在我的表中添加一个像这个例子(https://datatables.net/examples/api/counter_columns.html)这样的索引列。我尝试将示例中的代码实现到我的程序中,但没有出现结果。如何将示例中的索引列添加到我的表中?谢谢你
桌子 :
<table id="order_data">
<thead >
<tr >
<th style="text-align:center;" width="21%">Number</th>
<th style="text-align:center;" width="21%">Datetime </th>
<th style="text-align:center;" width="19%">Temp</th>
<th style="text-align:center;" width="21%">Humidity</th>
</tr>
</thead>
</table>
Javascript:
$(document).ready(function(){
$('.input-daterange').datepicker({
todayBtn:'linked',
format: "yyyy-mm-dd",
autoclose: true
});
fetch_data('no');
function fetch_data(is_date_search, start_date='', end_date='')
{
var dataTable = $('#order_data').DataTable({
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: '<h3 align ="center">Monitoring</h3>',
text: '<i class="fa fa-pencil"></i>',
messageTop: '<p align ="center"><strong>PDF</strong> created by PDFMake with Buttons for DataTables.</p>'
},
{
extend: 'pdfHtml5',
customize: function (doc) {
doc.content[1].table.widths =
Array(doc.content[1].table.body[0].length + 1).join('*').split('');
},
title: 'Monitoring',
titleAttr: 'PDF',
text: 'PDF',
}
],
"columnDefs": [ {
"searchable": false,
"orderable": false,
"targets": 0
} ],
"order": [[ 1, 'asc' ]],
"processing" : true,
"serverSide" : true,
bFilter:false,
"ajax" : {
url:"fetch.php",
type:"POST",
data:{
is_date_search:is_date_search, start_date:start_date, end_date:end_date
},
},
});
}
$('#search').click(function(){
var start_date = $('#start_date').val();
var end_date = $('#end_date').val();
if(start_date != '' && end_date !='')
{
$('#order_data').DataTable().destroy();
fetch_data('yes', start_date, end_date);
//$("#tabel").show();
document.getElementById('tabel').style.display = "block";
}
else
{
alert("Both Date is Required");
}
});
dataTable.on( 'order.dt search.dt', function () {
dataTable.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
} ).draw();
});
解决方案
您引用的示例未使用server side processing。相反,它假设一个静态数据源。您拥有serverSide: true
并使用 AJAX 请求从源检索数据,因此有几种方法可以处理此问题:
1)获取数据后使用column render生成索引值:
{
"sName": "Index",
"render": function (data, type, row, meta) {
return meta.row; // This contains the row index
}
}
2.) 将索引值添加到您的数据源并与您的url:"fetch.php"
请求一起检索它。虽然这实际上更像是一个唯一的 ID 而不是行编号。
还有一个api 调用,row().index()
您可以通过多种方式加以利用。
推荐阅读
- python - 无法在 PyQt5 GUI 中的 QThread 中加载到 keras 模型
- python - boost/thread.hpp:没有这样的文件或目录
- django - Django:表单无效
- ios - 即使我没有使用任何 UIWebView,Apple 也不会接受我的应用程序
- javascript - 错误:在 nodejs 中请求 API 时 URI 无效
- c# - 将字典转换为元组列表
- android - 如何构建一个出现在所有应用程序屏幕中的全局计时器
- javascript - 我如何将原始数据从 javascript 发送到 Nativescript 中的 ESC/POS 网络打印机(无蓝牙)
- php - 使用带有where子句的php内部连接两个mysql表
- javascript - 无法在使用 SAP UI5 创建的应用程序中呈现 javascript HERE Maps API v3.1