this is my framework7 data table
I want to select the row with checkbox, and when I press the check button which beside the “add” button
i can get the row data.
after I finish reading the https://framework7.io/docs/checkbox.html & https://framework7.io/docs/data-table.html#data-table-app-methods ( Alternate header with row actions )
I only get some idea : app.dataTable.get(el)
and don’t what to do next.
can someone guide me to finish this?
I am a rookie in both javascript and framework7
$$(document).on(‘page:init’, ‘.page[data-name=“home_employee”]’, function(e) {
console.log(‘this is page employee’);var sqlget = 'SELECT * FROM `customers`'; //this is select the data from customers [emplotee_table (home_employee.html)] connection.query(sqlget, function(error, results, fields) { for (i = 0; i < results.length; i++) { $$(document).find('#employee_table').append($$('<tr> ' + '<td class="checkbox-cell">' + '<label class="checkbox">' + '<input type="checkbox">' + '<i class="icon-checkbox"></i>' + '</label>' + '</td>' + ' <td style="font-family:Poppins-Medium;" class="label-cell"> ' + results[i].name + ' </td>' + ' <td class="numeric-cell">' + results[i].telephone + '</td> ' + ' <td class="numeric-cell">' + results[i].order_num + '</td> ' + '<td class="numeric-cell">' + results[i].juice1_num + '</td> ' + '<td class="numeric-cell">' + results[i].juice2_num + '</td> ' + '<td class="numeric-cell">' + results[i].juice3_num + '</td> ' + '<td class="numeric-cell">' + results[i].date + '</td> ' + '</tr>')); } });
});
and here my html
<div class="block block-strong"> <div class="data-table search-content-list data-table-init card"> <div class="card-header"> <!-- Table links/actions --> <div class="data-table-links"> <!--ADD products button is at here--> <a class="link dynamic-popup icon-only" id="products_add"> <i style="height: 25px;width:25px;" class="icon material-icons md-only">add_round</i> </a> <!--out products button is at here--> <a class="link icon-only" id="product_out"> <i style="height: 25px;width:25px;" class="icon material-icons md-only">check_round</i> </a> </div> </div> <div style="overflow-y:scroll; height:320px;" class="card-content"> <table> <thead> <tr> <th class="checkbox-cell"> <label class="checkbox"> <input type="checkbox"> <i class="icon-checkbox"></i> </label> </th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="label-cell">Customer Name</th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Customer Numbers</th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Orders Numbers</th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice 1</th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice2</th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Juice 3</th> <th style="font-family:Montserrat-Bold;color: black;font-size: 17px" class="numeric-cell">Date</th> <th></th> </tr> </thead> <tbody id="employee_table"> <!--this is data from data_process.js--> </tbody> </table> </div> </div> </div>
and after i
console.log(app.dataTable.get());
I get this in my console
t {eventsParents: Array(1), eventsListeners: {…}, params: {…}, $el: Dom7, el: div.data-table.search-content-list.data-table-init.card, …}
$el: Dom7 {0: div.data-table.search-content-list.data-table-init.card, length: 1}
$headerEl: Dom7 {length: 0}
$headerSelectedEl: Dom7 {length: 0}
attachEvents: ƒ ()
collapsible: false
detachEvents: ƒ ()
el: div.data-table.search-content-list.data-table-init.card
eventsListeners: {}
eventsParents: [t]
params: {el: div.data-table.search-content-list.data-table-init.card}
__proto__: t