为什么在asp.net gridview中使用jquery Datatables.js不显示表控件?

时间:2015-05-13 18:19:55

标签: jquery asp.net html5 gridview jquery-datatables

这是html代码:

我尝试使用jquery datatable插件。我的问题是控件没有呈现/显示。

      <!-- jQuery 2.1.3 -->
<script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- DATA TABES SCRIPT -->
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js" type="text/javascript"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='../../plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<!-- page script -->

 <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
         $(".GridView1").dataTable({
             "bPaginate": true,
             "bLengthChange": false,
             "bFilter": false,
             "bSort": true,
             "bInfo": true,
             "bAutoWidth": false
         });
     });
  </script>

这是带有hte jquery代码和导入的html代码:

    Protected Sub GridView1_PreRender(sender As Object, e As EventArgs)
    ' You only need the following 2 lines of code if you are not 
    ' using an ObjectDataSoturce of SqlDataSource
    GridView1.DataSource = table1
    GridView1.DataBind()

    If GridView1.Rows.Count > 0 Then
        'This replaces <td> with <th> and adds the scope attribute
        GridView1.UseAccessibleHeader = True

        'This will add the <thead> and <tbody> elements
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader

        'This adds the <tfoot> element. 
        'Remove if you don't have a footer row
        GridView1.FooterRow.TableSection = TableRowSection.TableFooter
    End If

End Sub

这是我的第一个代码,后面是预渲染:

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles EinschlitzsucheButton.Click



Dim x3 As XmlElement = SearchService.FindAddressesBySearchtext(login, pass, Einschlitz.Text.ToString, False)


table1 = xmltogridview(x3)
GridView1.DataSource = table1
GridView1.DataBind()

If GridView1.Rows.Count > 0 Then
    'This replaces <td> with <th> and adds the scope attribute
    GridView1.UseAccessibleHeader = True

    'This will add the <thead> and <tbody> elements
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader

    'This adds the <tfoot> element. 
    'Remove if you don't have a footer row
    GridView1.FooterRow.TableSection = TableRowSection.TableFooter
End If












End Sub

这是asp:按钮背后的代码,它将填充gridview。

with costs1 as
(
    select ID
        , SUM(cost1) as cost1
    from table1
    group by ID
)
, costs2 as
(
    select ID
        , SUM(cost2) as cost2
    from table2
    group by ID
)
, costs3 as
(
    select ID
        , SUM(cost3) as cost3
    from table3
    group by ID
)

select c1.ID
    , c1.cost1
    , c2.cost2
    , c3.cost3
from costs1 c1
join costs2 c2 on c2.ID = c1.ID
join costs3 c3 on c3.ID = c1.ID

我尝试了将数据放入jquery datatables插件的所有内容,但每次都缺少控件。我没有修复一个特殊的方法,我可以将我的数据转换为字符串,行,你想要什么,我需要一个解决方法。

1 个答案:

答案 0 :(得分:1)

(原始海报提供了答案作为评论。在这里剪切/粘贴它所属的地方。)

  

我使用的Bootstrap模板有一个旧版本的datatable插件。我把它改成了最新版本。现在我使用asp gridview而不使用任何方法,并且可以轻松地将数据表绑定到它。