数据表效果不显示答案

【问题标题】：Data tables effect not display数据表效果不显示
【发布时间】：2016-09-08 06:31:21
【问题描述】：

当我尝试下面的代码时，效果不会在 gridview1 上显示 .. gridview1 显示没有任何效果意味着显示简单的 gridview 这是因为日期链接当我删除这些链接时，效果会在 gridview1 上可见，但是当我添加日期链接时，效果不会显示在 girview1 上

有什么办法吗？

更新：

头

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


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <link rel="stylesheet"  href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<link href="Styles/stylechart.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/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 date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />
<script type="text/javascript"  src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript"   src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>





     <script type="text/javascript">
  $(document).ready(function () {
      $("#GridView1").prepend($("<thead></thead>").append($(this).find("tr:first"))).dataTable({
          "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
          "scrollY": 200,
          "scrollX": true,
          dom: 'Blfrtip',
          lengthMenu: [
              [10, 25, 50, -1],
              ['10 rows', '25 rows', '50 rows', 'Show all']
          ],
          buttons: [
              'excelHtml5'
          ]
      });
  });

     <script type="text/javascript">
         $(function () {
             $("#fromdate").datepicker({
                 dateFormat: 'yy-mm-dd',
             });
             $("#todate").datepicker({
                 dateFormat: 'yy-mm-dd',
             });
         });

    </script>
     <style>

       div.dataTables_wrapper {
        width: 1200px;
        margin: 0 auto;
        margin-left:20px;
    }

         </style>
</head>

身体

<body>
    <form id="form1" runat="server">
        <div>
  <span>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
        </span>

        <span>
    <asp:Label ID="Label2" runat="server" Text="From Date"></asp:Label>

    <input id="fromdate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />
</span>

     <span>
     <asp:Label ID="Label3" runat="server" Text="To Date"></asp:Label>

     <input  id="todate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />
 </span>

        <span>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </span>
        </div><br />

        <div>
        <asp:GridView ID="GridView1" class="display nowrap" cellspacing="0" width="100%" runat="server"></asp:GridView>

        </div>

    <div>      
            </div>
    </form>
</body>

更新：

现在效果在gridview上可见但导出按钮不显示

【问题讨论】：

标签： javascript gridview datatables

【解决方案1】：

我认为您需要更改选择器，因为通常 dotnet 更改具有 runat="server" 属性的对象 ID 值。

例如，我添加了名为 GridView1 的新类：

<asp:GridView ID="GridView1" class="GridView1 display nowrap" runat="server"></asp:GridView>

所以，在 JS 中你也需要更改选择器：

$('.GridView1').DataTable({
  ...
});

更新 1：

只是小错误，您在加载 jquery 文件之前添加了 jqueryUI。检查我的 sn-p：

参考datatables网站，他们说：

请注意，复制、excel、csv 和 pdf 按钮类型也可能使用此处提到的 HTML5 按钮类型，为旧版浏览器 (IE9-)。

您检查过您的环境吗？
也许不允许我们将一些 FLASH 对象添加到 sn-p 中

更新 2： 清理你包含的 JS 文件。

$(function () {
  $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copyHtml5',
      'excelHtml5',
      'csvHtml5',
      'pdfHtml5'
    ]
  });
  
  $("#fromdate").datepicker({
    dateFormat: 'yy-mm-dd'
  });
  
  $("#todate").datepicker({
    dateFormat: 'yy-mm-dd'
  });
});

div.dataTables_wrapper {
        width: 1200px;
        margin: 0 auto;
        margin-left:20px;
    }

<script type="text/javascript"  src="//code.jquery.com/jquery-1.12.3.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
  
    <link rel="stylesheet"  href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

<link href="Styles/stylechart.css" rel="stylesheet" />

    
<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 date--%>-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" />

<form id="form1" runat="server">
        <div>
  <span>
            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
        </span>

        <span>
    <asp:Label ID="Label2" runat="server" Text="From Date"></asp:Label>

    <input id="fromdate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />
</span>

     <span>
     <asp:Label ID="Label3" runat="server" Text="To Date"></asp:Label>

     <input  id="todate"   value="dd/mm/yyyy" runat="server" clientidmode="static" />
 </span>

        <span>
            <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
        </span>
        </div><br />

        <div>
        <asp:GridView ID="GridView1" class="display nowrap" cellspacing="0" width="100%" runat="server"></asp:GridView>

        </div>

    <div>
        <table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            </tbody>
            </table>
            </div>
    </form>

【讨论】：

我只是添加了您的 girdview html 代码.. 但是日期时间选择器和格式不显示.. 控制台上出现错误.. Uncaught TypeError: $(...).DataTable is not a function when i添加日期时间选择器链接..
@user6628729：你能给我简单的生成表输出吗？因为，您只添加了页面的一小部分。我看不出你的 DOM 有什么问题..
但是导出按钮在哪里？ @Fadhly Permata
@user6628729：你没有在任何地方提到任何“导出按钮”
但我认为当我们使用数据表链接时，这些导出到 excel /pdf /csv 是自动生成的