Question

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

任何解决方案？

更新

HEAD

<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上可见，但导出按钮不显示

Answer 1

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

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

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

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

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

更新1：

只是一点错误，您在加载jqueryUI文件之前添加jquery。检查我的代码段：

指datatables网站，他们已经说过：

请注意，copy，excel，csv和pdf按钮类型也可能使用此处提到的HTML5按钮类型，提供Flash后备旧浏览器（IE9 - ）。

你检查一下你的环境吗？
也许不允许我们将一些FLASH对象添加到代码段

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

数据表效果不显示

1 个答案: