我有带固定列的jquery数据表,它带有滚动条和重叠。
插件:
const
使用Javascript:
<link href="../../Content/jquery.dataTables.css" rel="stylesheet" />
<link href="../../Content/dataTables.jqueryui.css" rel="stylesheet" />
<script src="../../Scripts/js/jquery.dataTables.js"></script>
<script src="../../Scripts/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script>
<script src="../../Scripts/tableExport.js"></script>
<script src="../../Scripts/jquery.base64.js"></script>
HTML:
$(document).ready(function () {
jQuery.noConflict();
$('#srch th').each(function () {
var title = $('#srch th').eq($(this).index()).text();
if (title == "Preffered") {
alert("in");
$(this).html('<input type="checkbox" />');
}
else if (title != "") {
$(this).html('<input type="text" placeholder="' + title + '" />');
}
else {
$(this).html('<input type="text" placeholder="' + title + '" style="visibility:hidden" />');
}
});
// DataTable
var table = $('#ERHCtbl').DataTable(
{
sScrollY: 150,
scrollX: true,
scrollCollapse: true,
fixedColumns: {
leftColumns: 1
}
});
table.columns().eq(0).each(function (colIdx) {
$('input', 'th:nth-child(' + (colIdx + 1) + ')').on('keyup change', function () {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
在上图中,第一列是固定的,但它显示为滚动和重叠