正在初始化JavaScript中有標記的DataTables

Question

我在這裏遇到問題。我解析了一個.CSV文件，我需要將它們顯示爲DataTables格式。

問題是加價都內的JavaScript如下圖所示

$("#upload").bind("click", function() { 
     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.xlsx|.xls)$/; 
     if (regex.test($("#fileUpload").val().toLowerCase())) { 
      if (typeof (FileReader) != "undefined") { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var table = $("<table id='comp-monitor' class='table table-condensed table-striped'> \n\ 
      <tr><th>No.</th><th>DESKRIPSI ASSEMBLY</th><th>Drawing No.</th><th>QTY3</th><th>WEIGHT</th><th>-</th></tr>"); 
        var rows = e.target.result.split("\n"); 
        var no = 0; 
        for (var i = 0; i < rows.length; i++) { 
         no++; 
//      console.log(i); 
         var row = $("<tr />"); 
         var cells = rows[i].split(","); 
         // Column No 
         var cell_no = $("<td />"); 
         cell_no.html(no); 
         row.append(cell_no); 

         for (var j = 0; j < cells.length; j++) { 
          var cell = $("<td />"); 
          cell.html(cells[j]); 
          row.append(cell); 
         } 

         table.append(row); 
        } 
        $("#dvCSV").html(''); 
        $("#dvCSV").append(table); 
       } 
       reader.readAsText($("#fileUpload")[0].files[0]); 

      } else { 
       alert("This browser does not support HTML5."); 
      } 
     } else { 
      alert("Please upload a valid CSV file."); 
     } 

    }); 

和jQuery的初始化僅僅是功能

$('#comp-monitor').DataTable(); 

不知何故，數據表不運行外，我需要一些幫助這個放置初始化的地方。

多謝，

Answer 1

可以初始化數據表中的javascript裏面本身

$("#upload").bind("click", function() { 
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.xlsx|.xls)$/; 
    if (regex.test($("#fileUpload").val().toLowerCase())) { 
     if (typeof (FileReader) != "undefined") { 
      var reader = new FileReader(); 
      reader.onload = function (e) { 
       var table = $("<table id='comp-monitor' class='table table-condensed table-striped'> \n\ 
      <tr><th>No.</th><th>DESKRIPSI ASSEMBLY</th><th>Drawing No.</th> <th>QTY3</th><th>WEIGHT</th><th>-</th></tr>"); 
       var rows = e.target.result.split("\n"); 
       var no = 0; 
       for (var i = 0; i < rows.length; i++) { 
        no++; 
//      console.log(i); 
        var row = $("<tr />"); 
        var cells = rows[i].split(","); 

        // Column No 
        var cell_no = $("<td />"); 
        cell_no.html(no); 
        row.append(cell_no); 

        for (var j = 0; j < cells.length; j++) { 
         var cell = $("<td />"); 
         cell.html(cells[j]); 
         row.append(cell); 
        } 

        table.append(row); 
       } 
       $("#dvCSV").html(''); 
       $("#dvCSV").append(table); 
//HERE 
       $('#comp-monitor').DataTable(); 

      } 
      reader.readAsText($("#fileUpload")[0].files[0]); 

     } else { 
      alert("This browser does not support HTML5."); 
     } 
    } else { 
     alert("Please upload a valid CSV file."); 
    } 

}); 

讓我知道這項工作。

Answer 2

我發現用addrow

var t = $('#comp-monitor').DataTable({ 

    }); 
    $("#upload").bind("click", function() { 
     var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.xlsx|.xls)$/; 
     if (regex.test($("#fileUpload").val().toLowerCase())) { 
      if (typeof (FileReader) != "undefined") { 
       var reader = new FileReader(); 
       reader.onload = function (e) { 
        var table = $("#comp-monitor tbody"); 
        var rows = e.target.result.split("\n"); 
        var no = 0; 
        table.empty(); 
        for (var i = 0; i < rows.length; i++) { 
         no++; 
         var row = $("<tr class='odd' role='row' />"); 
         var cells = rows[i].split(","); 
          t.row.add([ 
           no, 
           cells[0], 
           cells[1], 
           cells[2], 
           cells[3], 
           cells[4] 
          ]).draw(false); 
         table.append(row); 
        } 
       } 
       reader.readAsText($("#fileUpload")[0].files[0]); 

      } else { 
       alert("This browser does not support HTML5."); 
      } 
     } else { 
      alert("Please upload a valid CSV file."); 
     } 
    });