Data-table-init calling through javascript

I am creating dynamically a collapsible DataTable through Ajax data fetch. However since “data-table-init” is not called it is not showing list view for small screen. How do we call “data-table-init” function through javascript?

http://framework7.io/docs/data-table.html#data-table-app-methods

app.dataTable.create
1 Like

Thanks for the prompt reply. However could you share some sample code on how to use app.dataTable.create method.

<div class="data-table my-data-table">...</div>
app.dataTable.create('.my-data-table');
3 Likes

Its not calling init function. Pls see the code below and tell what is wrong in this -

app.request.post('postrequest.php', { th:th,s:s, d:d }, function (data) {
  
  $$('#genstatsres').html(data);
  app.dataTable.create('.mytable'); 
  
});
}

content for postrequest.php is as per the example in view-source:https://framework7.io/docs-demos/data-table-collapsible.html

* 1. * <div class="card data-table data-table-collapsible data-table-init mytable"> .. </div>

Would be good to see live example or JSFiddle with the issue, it is not clear what is happening in your request/response

I am not able to upload html pages in this forum. the codes are as below for “test.html” and “t2.html”. Please help find out the error. Basically in small screen collapsible table is not working as expected. Reference snapshot is also attached herewith.

test.html

> <!DOCTYPE html>
> <html>
> <head>
> <meta charset="utf-8">
> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
> <meta name="apple-mobile-web-app-capable" content="yes">
> <meta name="apple-mobile-web-app-status-bar-style" content="black">
> <title>My App</title>
> <link rel="stylesheet" href="https://framework7.io/dist/css/framework7.min.css">
> <link rel="stylesheet" href="https://framework7.io/css/framework7-icons.css">
> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
> </head>
> <body>
> <div id="app">
> <div class="view view-main view-init">
> <div class="page">
> <div class="navbar">
> <div class="navbar-inner">
> <div class="left"></div>
> <div class="title">Collapsible Table</div>
> <div class="right"></div>
> </div>
> </div>
> <div class="page-content">
> <div id='genstatsres'>
> </div>
> </div>
> </div>
> </div>
> </div>
> <script type="text/javascript" src="https://framework7.io/dist/js/framework7.min.js"></script>
> <script>
>       var theme = 'ios';
>       if (location.href.indexOf('theme=md') >= 0) theme = 'md';
>       var plugin = {
>         params: {
>           theme: theme,
>           root: '#app',
>         }
>       };
>       if (Framework7.use) Framework7.use(plugin);
>       else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
>       
>     </script>
> <script>
> // Dom7
> var $$ = Dom7;
> var app = new Framework7();
> app.request.post('t2.html', {  }, function (data) {
>   
>   $$('#genstatsres').html(data);
>   app.dataTable.create('.mytable'); 
>   
> });
> 
> 
> </script>
> </body>
> </html>

t2.html

> <div class="card data-table data-table-collapsible data-table-init mytable">
> <div class="card-header">
> <div class="data-table-title">Nutrition</div>
> </div>
> <div class="card-content">
> <table>
> <thead>
> <tr>
> <th class="label-cell">Desert (100g serving)</th>
> <th class="numeric-cell">Calories</th>
> <th class="numeric-cell">Fat (g)</th>
> <th class="numeric-cell">Carbs</th>
> <th class="numeric-cell">Protein (g)</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td class="label-cell">Frozen yogurt</td>
> <td class="numeric-cell">159</td>
> <td class="numeric-cell">6.0</td>
> <td class="numeric-cell">24</td>
> <td class="numeric-cell">4.0</td>
> </tr>
> <tr>
> <td class="label-cell">Ice cream sandwich</td>
> <td class="numeric-cell">237</td>
> <td class="numeric-cell">9.0</td>
> <td class="numeric-cell">37</td>
> <td class="numeric-cell">4.4</td>
> </tr>
> <tr>
> <td class="label-cell">Eclair</td>
> <td class="numeric-cell">262</td>
> <td class="numeric-cell">16.0</td>
> <td class="numeric-cell">24</td>
> <td class="numeric-cell">6.0</td>
> </tr>
> <tr>
> <td class="label-cell">Cupcake</td>
> <td class="numeric-cell">305</td>
> <td class="numeric-cell">3.7</td>
> <td class="numeric-cell">67</td>
> <td class="numeric-cell">4.3</td>
> </tr>
> </tbody>
> </table>
> </div>
> </div>

I have you the wrong reference, it should be:

app.dataTable.create({el: '.my-data-table'});

Thank you. It works.

I have same problem but I use react version, how can I use this solution in a f7 react component.
Thank you in advance

i get the problome same