文章/答案/技术大牛

发布

问多次触发Jquery事件
EN

Stack Overflow用户

提问于 2017-06-25 03:18:43

回答 2查看 2K关注 0票数 1

我有一个，当用户单击load按钮时，它由DB的ajax调用填充。数据根据用户在数据采集器中提供的日期填充。我还有一个导出按钮来导出加载的数据表到excel。导出可以很好地处理随着页面加载而来的datatable。但是，当datatable再次填充时，将下载多个文件。

这是html

$(document).ready(function() {

  //export to excel Districts Remittance list
  $('#btnExcelDistrictsRemittance').click(function() {
    $('<table>').append($("#remittanceDistrict").DataTable().$('tr').clone()).table2excel({
      exclude: ".noXls",
      name: "Districts Remittance",
      filename: 'Districts Remittance-' + date //do not include extension
   
  });
}


})

<script src="js/dataTables/jquery.table2excel.min.js"></script>
<div id="month-group" class="input-group">
  <i class="fa fa-calendar">&nbsp</i>
  <asp:TextBox ID="selecttMonth" ClientIDMode="Static" runat="server"></asp:TextBox><i class="fa fa-refresh" id="btnGo"></i>
</div>
<button type="button" id="btnExcelDistrictsRemittance" class="export-to-excel" title="Export to Excel"><i class="fa fa-files-o fa-2x"></i></button>
<table id="remittanceDistrict" class="table  table-bordered table-hover table-responsive table-striped" style="margin-top: 10px">
  <thead class="arrear-table">
    <tr>
      <th>#</th>
      <th>District</th>
      <th>Amount</th>
    </tr>
  </thead>
</table>

对于导出，我使用的是table2excel.js插件。注意：-我发现$('#btnExcelDistrictsRemittance').click()多次发射。任何帮助都是非常感谢的。如果这个问题太宽泛的话，请原谅，我是新来的。

javascript

ajax

datatables

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-08-03 10:34:53

如前所述，问题在于$'(#btnExcelDistrictsRemittance').click()多次触发。

我自己解决了它由unbinding所有的events从元素。更新后的代码如下：

$('#btnExcelDistrictsRemittance').unbind().click() {
    // whatever
}

更新

在新版本的jquery中，可以使用off()方法。

$'(#btnExcelDistrictsRemittance').Off().click() {
        // whatever
    }

票数 3

Stack Overflow用户

发布于 2017-06-28 06:26:39

好的，使用datatable插件而不是table2excel.js插件。

这个解决方案有更多的选择，而且几乎是完美的。

仅以excel为例：

$(document).ready(function() {
    $('#table_id').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'excel'
        ]
    } );
} );

/*
 * Table
 */
table.dataTable {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

table.dataTable thead th {
    padding: 3px 18px 3px 10px;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer;
    *cursor: hand;
}

table.dataTable tfoot th {
    padding: 3px 18px 3px 10px;
    border-top: 1px solid black;
    font-weight: bold;
}

table.dataTable td {
    padding: 3px 10px;
}

table.dataTable td.center,
table.dataTable td.dataTables_empty {
    text-align: center;
}

table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src = "https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src= "https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src= "https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src= "https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
<div>
<table id="table_id">   
        <thead>        
            <tr>            
                <th>Name</th>         
                <th>Age</th>               
                <th>Bot</th> 
            </tr>   
        </thead> 
        <tbody>  
            <tr>       
                <td>John</td>
                <td>25</td>   
                <td><button type="button" id="myBtn_1">Select</button></td> 
                
            </tr>
            <tr>
                <td>Ana</td>
                <td>22</td>     
                <td><button type="button" id="myBtn_2">Select</button></td>
           </tr>
           <tr>
                <td>Diana</td>
                <td>23</td>    
                <td><button type="button" id="myBtn_3">Select</button></td> 
           </tr>
           <tr>
                <td>Lino</td>
                <td>32</td>    
                <td><button type="button" id="myBtn_4">Select</button></td> 
           </tr>
        </tbody>
    </table>
</div>

所有备选方案：

$(document).ready(function() {
    $('#table_id').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );

/*
 * Table
 */
table.dataTable {
    margin: 0 auto;
    clear: both;
    width: 100%;
}

table.dataTable thead th {
    padding: 3px 18px 3px 10px;
    border-bottom: 1px solid black;
    font-weight: bold;
    cursor: pointer;
    *cursor: hand;
}

table.dataTable tfoot th {
    padding: 3px 18px 3px 10px;
    border-top: 1px solid black;
    font-weight: bold;
}

table.dataTable td {
    padding: 3px 10px;
}

table.dataTable td.center,
table.dataTable td.dataTables_empty {
    text-align: center;
}

table.dataTable tr.odd { background-color: #E2E4FF; }
table.dataTable tr.even { background-color: white; }

table.dataTable tr.odd td.sorting_1 { background-color: #D3D6FF; }
table.dataTable tr.odd td.sorting_2 { background-color: #DADCFF; }
table.dataTable tr.odd td.sorting_3 { background-color: #E0E2FF; }
table.dataTable tr.even td.sorting_1 { background-color: #EAEBFF; }
table.dataTable tr.even td.sorting_2 { background-color: #F2F3FF; }
table.dataTable tr.even td.sorting_3 { background-color: #F9F9FF; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.flash.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src = "https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src= "https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<script src= "https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
<script src= "https://cdn.datatables.net/buttons/1.3.1/js/buttons.print.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.3.1/css/buttons.dataTables.min.css"/>
<div>
<table id="table_id">   
        <thead>        
            <tr>            
                <th>Name</th>         
                <th>Age</th>               
                <th>Bot</th> 
            </tr>   
        </thead> 
        <tbody>  
            <tr>       
                <td>John</td>
                <td>25</td>   
                <td><button type="button" id="myBtn_1">Select</button></td> 
                
            </tr>
            <tr>
                <td>Ana</td>
                <td>22</td>     
                <td><button type="button" id="myBtn_2">Select</button></td>
           </tr>
           <tr>
                <td>Diana</td>
                <td>23</td>    
                <td><button type="button" id="myBtn_3">Select</button></td> 
           </tr>
           <tr>
                <td>Lino</td>
                <td>32</td>    
                <td><button type="button" id="myBtn_4">Select</button></td> 
           </tr>
        </tbody>
    </table>
</div>

重要说明：

有些特性在片段(打印)中可能不起作用；

需要初始化，如果没有它们，代码就无法工作。

有关更多信息，请访问以下链接：https://datatables.net/extensions/buttons/examples/initialisation/export.html

如果有疑问，就向我求助吧。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44742889

复制

相似问题

问多次触发Jquery事件
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多次触发Jquery事件EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问多次触发Jquery事件
EN