Question

我试试这个例子 https://datatables.net/examples/basic_init/scroll_xy.html

我这样做

<script type="text/javascript">
    $(document).ready(function() {
        $('#tabledata').dataTable({
         bSort: false,
         "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
        "scrollY":        "200px",
        "scrollCollapse": true,
        "info":           true,
        "paging":         true,
        "scrollX": true,
        dom: 'Blfrtip',
        lengthMenu: [
            [10, 25, 50, -1],
            ['25 rows', '50 rows', 'Show all']
        ],
        buttons: [
            'excelHtml5'
        ]

    } );
} );
</script>

我通过jquery生成表

$("#tabledata").append(
"<thead><tr><th>No</th><th>DateTime</th><th>Status</th><th>Spd</th><th>Lon</th><th>Lati</th><th>Ref</th><th>Dir</th><th>No2</th><th>No3</th><th>VehDate</th><th>CoName</th><th>ID</th><th>marks</th></tr></thead>");
for (var i = 0; i < d.length - 1; i++) {
if (d[i] !== null) {
$("#tabledata").append("<tbody><tr><td>" +
d[i][0] + "</td> <td>" +
d[i][1] + "</td> <td>" +
d[i][2] + "</td> <td>" +
d[i][3] + "</td> <td>" +
d[i][4] + "</td><td>" +
d[i][5] + "</td><td>" +
d[i][6] + "</td><td>" +
d[i][7] + "</td><td>" +
d[i][8] + "</td><td>" +
d[i][9] + "</td><td>" +
d[i][10] + "</td><td>" +
d[i][11] + "</td><td>" +
d[i][12] + "</td><td>" +
d[i][13] + "</td><td>" +
d[i][14] + "</td></tr></tbody>");

表生成成功但表中的搜索，标题和行无法正常工作

当我点击这些排序箭头然后标题消失时，左侧角落也有排序箭头

我还添加了这些链接

<head runat="server">
<title></title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="Scripts/map/jquery.fullbg.js"></script><script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzSyC-o_Xf8Ki5rOpEyLgR5msc&sensor=false"></script>
<link href="Styles/stylechart.css" rel="stylesheet" />
<link href="Styles/fixed-navigation-bar.css" rel="stylesheet" />
<link href="Styles/map.css" rel="stylesheet" />
<%-- for table template--%>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <%--<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />--%><link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <link href="Styles/grid/datatables_bootstrap.min.css" rel="stylesheet" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>   
    <script type="text/javascript"  src="//code.jquery.com/jquery-1.12.3.js"></script>
    <script type="text/javascript"   src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript"   src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script type="text/javascript"  src="//cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script type="text/javascript"  src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script><link rel="stylesheet"  href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
     <link href="Styles/grid/buttons.dataTables.min.css" rel="stylesheet" />  
    <%-- for table template--%>
    </head>

检查此图片

image

datatbase.net：搜索无法正常工作

0 个答案: