Jquery DataTable fixed coulmn出现滚动条和重叠

时间:2015-12-03 04:52:07

标签: jquery css datatables

我有带固定列的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();
            });
        });
    });

输出: enter image description here

在上图中,第一列是固定的,但它显示为滚动和重叠

0 个答案:

没有答案