CODEWITHSUNDEEP
javascriptajaxdatatables
Beingnin
Beingnin

Reputation: 2422

Jquery event firing multiple times

I have a jquery datatable, which is populated by an ajax call from DB when the user clicks a load button. The data is populated according to the date provided by user in a datepicker. I also have an export button to export the loaded datatable to excel. The export works fine with the datatable which comes with the page load. however multiple files are getting downloaded when datatable is populated again.

Here is the 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>

For exporting I am using table2excel.js plugin. Note:- I discovered that the $('#btnExcelDistrictsRemittance').click() is firing multiple times . Any help is appreciated. Pardon if the question is too broad, I am new to the community

Upvotes: 1

Views: 2214

Answers (2)

Beingnin
Beingnin

Reputation: 2422

As mentioned earlier the problem was with the $'(#btnExcelDistrictsRemittance').click() firing multiple times.

I solved it myself by unbinding all the events from the element. Updated code below:

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

Update

In newer versions of jquery you can use off() method

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

Upvotes: 3

Jose Marques
Jose Marques

Reputation: 748

Ok use the datatable plugin instead of table2excel.js plugin.

This solution has more options and works almost perfectly.

Example for excel only:

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

All the options:

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

Important notes:

Some of the features may not work in the snippet (Print);

Initializations are required, without them the code does not work.

For more information visit this link: https://datatables.net/extensions/buttons/examples/initialisation/export.html

Any doubt, just ask for my help.

Upvotes: 0

Related Questions