Question

所以我试图运行允许任何人在我的数据库上运行查询，然后我想在页面上显示结果。由于查询可以返回任意数量的列，因此我在计算返回查询后的列数，然后创建表。问题是我尝试使用Datatables文档中提供的Bootstrap样式，但是虽然页面按钮的样式正确，但表格却没有。

页面附带的html样式正确，生成的类似乎与Bootstrap文档中的类相对应，但仍未应用样式。

您可以访问www.dito.ninja上的页面查看完整代码。

extends layout

block head
    link(rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css")
    link(rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css")

    script(type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js")
    script(type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js")
    script(type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js")
    script(type="text/javascript" charset="utf-8")

block content
  .row
    .col-lg-6
      div.label.label-default Table name is 'products'. Write queries like "SELECT * FROM products LIMIT 100;"
  .row
    .col-lg-6
      .input-group(role = "group")
        input.form-control#my-input(type='text' value ='SELECT * FROM products LIMIT 100;' style="width: 500px;")
        span.input-group-btn
          button.btn.btn-default#my-button(type='button' onclick='buttonclicked()') Work! Work!
  .row
    table#my-table

  script.
        function buttonclicked(){
            $.post( '/users/query/', {qq: $('#my-input').val()} , function( data ) {
                var cols = [];
                for (var col in data[0]) cols.push({"title": col});
                for (var i = 0; i < data.length; ++i) {
                    var newRow = [];
                    for (var val in data[i]) {
                        newRow.push(data[i][val]);
                    }
                    data[i] = newRow;
                }
                $('#my-table').dataTable({
                    "data": data,
                    "columns": cols
                });   
            });
        }

Answer 1

使用一些超时来调用你的函数

setTimeout(function(){
  buttonclicked()
},1000);

可能你会在加载DOM /脚本之前调用它

Bootstrap未应用于数据表中的动态加载表

1 个答案: