Declare Data Table auf Lenker Vorlage

Question

Ich habe vor kurzem begonnen, in meinen Projekten mit hostbar.js zu arbeiten, und es scheint ziemlich interessant.So weit so gut, aber im kämpfen bei der Erstellung dynamischer Datengrids mit einer Vorlage.

ich habe folgende json

gridrow: [ 
    { col1: 'a', col2: 'b', col3: 'c' }, 
    { col1: 'd', col2: 'e', col3: 'f' }, 
    { col1: 'g', col2: 'h', col3: 'i' } 
] 

wenn ich Vorlage

<tbody> 
<table id="dt_scroll"> 
{{#each gridrow}} 
    <tr> 
     <td>{{col1}}</td> 
     <td>{{col2}}</td> 
     <td>{{col3}}</td> 
    </tr> 
{{/each}} 
</table> 
</tbody> 

erstellen, wenn ich Datentabelle für die Tabelle erklären dt_scroll zeigen Fehler

$invoice_preview.html(theCompiledHtml); 
$invoice_form.html(''); 
$window.resize(); 
$dt_scroll = $('#dt_scroll'); 
console.log($dt_scroll.length); 
if ($dt_scroll.length) { 
    $('#dt_scroll').DataTable({ 
     "scrollY": "200px", 
     "scrollCollapse": false, 
     "paging": false 
    }); 
} 

Answer 1

Ich nehme an, das Problem ist, dass der Browser versucht, die <table/> zu analysieren. Wenn Sie das versuchen, wird es fehlschlagen. {{#each gridrow}} ist als erstes Kind einer Tabelle nicht zulässig.

Um dies zu beheben, legen Sie einfach Ihre Vorlage in ein Skript-Tag. Ich habe auch hier Ihre HTML festgelegt, da es nicht gültig für die Datatable-Plugin war

<div id="invoice_preview"></div> 

<script type="x-template" id="dt_scroll"> 
    <table> 
    <thead> 
     <tr> 
     <th>1.</th> 
     <th>2.</th> 
     <th>3.</th> 
     </tr> 
    </thead> 
    <tbody> 
     {{#each gridrow}} 
     <tr> 
     <td>{{col1}}</td> 
     <td>{{col2}}</td> 
     <td>{{col3}}</td> 
     </tr> 
     {{/each}} 
    </tbody> 
    </table> 
</script> 

Jetzt ist der JavaScript-Code in etwa so ähnlich aussehen muss.

var context = {title: "My New Post", gridrow: [ 
    { col1: 'a', col2: 'b', col3: 'c' }, 
    { col1: 'd', col2: 'e', col3: 'f' }, 
    { col1: 'g', col2: 'h', col3: 'i' } 
]} 

// compile the template 
var html = Handlebars.compile($('#dt_scroll').html())(context) 

// setting the compiled html 
var $invoice_preview = $('#invoice_preview') 
$invoice_preview.html(html) 

// start the plugin 
$invoice_preview.find(">:first-child").DataTable({ 
    "scrollY": "200px", 
    "scrollCollapse": false, 
    "paging": false 
})