如何将jquery.datatable.js中的数据表控件元素添加到动态创建的html表中?

时间:2015-05-13 12:38:44

标签: jquery asp.net datatables code-behind

我为我的asp.net webforms项目使用了一个bootstrap模板。我将数据表部分复制并粘贴到我的aspx页面中。之后我删除了硬编码表................

而是我在codebehind中创建了表:

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


        Dim test As String = ConvertxmlToHTML(table1)

        datatableDIV.InnerHtml = test
        Page.ClientScript.RegisterStartupScript(Me.[GetType](), "table_function", "functiontest();", True)

如您所见,变量测试被放置在中
通过datatablediv.InnerHtml = test 之后我调用了线程末尾显示的functiontest()Javacscript方法。 这是我的aspx页面的内容

<section class="content-header">
  <h1>
    Data Tables
    <small>advanced tables</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
    <li><a href="#">Tables</a></li>
    <li class="active">Data tables</li>
  </ol>
</section>



           <!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-xs-12">


      <div class="box">
        <div class="box-header">
          <h3 class="box-title">Data Table With Full Features</h3>
        </div><!-- /.box-header -->
        <div class="box-body" id="datatablediv" runat="server">


        </div><!-- /.box-body -->
      </div><!-- /.box -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</section><!-- /.content -->
<!-- Main content -->

这是在原始模板中调用的函数,其中表是硬编码的,

 <script type="text/javascript">
      $(function () {
        $("#example1").dataTable();
        $('#example2').dataTable({
          "bPaginate": true,
          "bLengthChange": false,
          "bFilter": false,
          "bSort": true,
          "bInfo": true,
          "bAutoWidth": false
        });
      });
    </script>

我把它改为:

<script type="text/javascript">
             function functiontest() {
                 alert('Function called successfully!');
                 $('#Datatable1').dataTable({
                     "bPaginate": true,
                     "bLengthChange": false,
                     "bFilter": false,
                     "bSort": true,
                     "bInfo": true,
                     "bAutoWidth": false
                 });

             }
           </script>

我插入的html表看起来与硬编码的表完全相同。但所有的选项,如排序行,通过文本框搜索特殊行,分页,都缺少。我不知道为什么,而且我也不知道如何正确添加它。

0 个答案:

没有答案