jQuery Datatable不能与ASP一起使用

时间:2016-12-23 03:07:05

标签: jquery asp.net datatables

我的代码可以很好地运行和显示数据库,但Datatable插件似乎不起作用。 我只是尝试启用排序,排序,搜索。 我的代码有什么问题?

    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/css/bootstrap-select.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.2/js/bootstrap-select.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
      <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
      <script src="https://cdn.datatables.net/plug-ins/1.10.13/pagination/simple_numbers_no_ellipses.js"></script>
    <script>
    $('#example').dataTable( {
        "paging": true
    } );
    </script>
    <% 
    '---------------------------------------------------------------------------------
    strProvider="Provider=SQLOLEDB;server=sfn-sql01-cza.sfn.intra;uid=s44467_s44467;pwd=4N7D5Js;database=s44467_S44467;Connection Reset=FALSE"
    '---------------------------------------------------------------------------------
    set dbConn=Server.CreateObject("ADODB.Connection")
    dbConn.Open strProvider %>
    </head>
    <body>
    <% rowCount=0
    sqlTable = "select id, name from [sysobjects] where type in ('U','V','P') and category<>2 Order By Name "
    set rsSchema=dbConn.execute(sqlTable)
    %>
    <div class="container-fluid" style="height: 660px;">
    <form method="post">
    <table class="table table-bordered" style="letter-spacing: 2px; word-spacing: 3px;">
    <tr>
    <td colspan="4" class="success">
    <select  name="getTable" class="selectpicker form-control show-tick" data-live-search="true">
    <% do until rsSchema.EOF %>
       <option value='<%=rsSchema(0)%>'><%= rsSchema(1)%>
    <% rsSchema.MoveNext
    loop
    rsSchema.Close
    set rsSchema = Nothing %></option>
    </select></td></tr>
    <tr>
    <td class="info">
    <input style="width:100%" type="Submit" name="cmdSubmit" value="Show Data" class="btn btn-success btn-xs" data-placement="bottom" data-toggle="tooltip" title="Get  50 data">
    </td>
    <td class="info">
    <input style="width:100%" type="Submit" name="cmdSubmit" value="Show Column" class="btn btn-primary btn-xs" data-placement="bottom" data-toggle="tooltip" title="Get column">
    </td>
    <td class="info">
    <input style="width:100%" type="Submit" name="cmdSubmit" value="Database" class="btn btn-danger btn-xs" data-placement="bottom" data-toggle="tooltip" title="Get database name">
    </td>
    <td class="info">
    <input style="width:100%" type="Submit" name="cmdSubmit" value="Count" class="btn btn-warning btn-xs" data-placement="bottom" data-toggle="tooltip" title="Count info table">
    </td>
    </tr>
    <tr  class="danger">
    <td colspan=2><textarea  class="form-control" rows="1" name=txaQuery>select top 100 *  from </textarea></td>
    <td align=center  colspan=2><input style="width:100%" type=submit name="cmdSubmit" value="Execute" class="btn btn-primary btn" data-toggle="tooltip" title="Run query"></td></tr>
    </table>
    </form>
    <% if request.form("cmdSubmit") <>  "" then
        tableId = Request("getTable") 
        sqltableName = "select name from [sysobjects]  where id = " & tableId  
        set ors3 = dbconn.execute(sqltableName)
        strTable = ors3(0)
    %>
    <%  
    if request.form("cmdSubmit") = "Show Data" then
        strQuery = "select top 50 * from [" & strTable & "]"
        strLbl = "<p><b>" & strTable & "</b></p>"
    end if
    if request.form("cmdSubmit") = "Show Column" then
        strQuery = "select C.name as FieldName,T.name as DataType,C.length from syscolumns C,sysTypes T where C.id='" & request.form("getTable") & "' and C.xtype = T.xtype and C.xusertype = T.xusertype "
            strLbl = "<p><b>" & strTable & "</b></p>"
    end if 
    if request.form("cmdSubmit") = "Database" then
        strQuery = "SELECT name FROM master.dbo.sysdatabases"
        strLbl = "<p><b>" & strTable & "</b></p>"
    end if
    if request.form("cmdSubmit") = "Count" then
        strQuery = "SELECT count(*) FROM  [" & strTable & "]"
        strLbl = "<p><b>" & strTable & "</b></p>"
    end if
    if request.form("cmdSubmit") = "Execute" then
        strQuery = request.form("txaQuery")
         strLbl = "<p><b>" & strQuery & "</b></p>"
    end if
    strTable = "<i>" & strQuery & "</i>"
    set rsTable = dbConn.Execute(strQuery)   
    %>
      <b><%= strLbl %></b> 
       <table id="mytable" style="letter-spacing: 1px; word-spacing: 2px;" align="center" class="display table table-bordered table-responsive" data-toggle="table">
       <!-- begin column headers for selected table -->
       <thead>
       <tr><% for each field in rsTable.Fields %>
          <th><%= field.Name %></th>   
          <% next %></tr></thead>
       <% 'cycle thru the record set and display each row results
       do until rsTable.EOF %>
          <tbody><tr><% for each field in rsTable.Fields %>
             <td><%= field.Value %></td>
          <% next %></tr>
       <!--  next row = next record -->
       <% rowCount = rowCount+1
       rsTable.MoveNext
       loop
       dbConn.Close
       set dbConn = Nothing
       set rsTable = Nothing 
       %>
       </tbody>
       </table>
       <% if rowCount>10 then %>
          <div align=center></div>
       <% end if
       end if
    %>
    </div>
    </body>
    </html>
    </html>

代码运行良好且没有错误,但未应用Datatable样式。我不知道为什么?

1 个答案:

答案 0 :(得分:1)

使用

$(document).ready(function() {
    $('#example').DataTable( {
                "paging": true
            } );
} );

而不是

$('#example').dataTable( {
        "paging": true
    } );

然后你必须把你的表的id放在'例子'。

和表格标签必须包含

<thead>
<tr>
<th>THead1</th>
<th>THead2</th>
...
<th>THeadN</th>
</tr>
</thead>