Javascriptを使用して入力データを動的に構築するDataTablesが機能しません

動的にテーブルを埋めようとしています。以下は私のコードです。 dataTestには、forループの後にdataSetの最終出力が含まれます。 dataTestをテーブルの入力として使用すると、テーブルが正常に動作し、テーブルがいっぱいになります。しかし、データセットを使用すると、エラーが送出されます。DataTables警告：テーブルID =例 - 行0、列1に不明なパラメータ '1'が要求されました。。私はこのことについてhttps://datatables.net/manual/tech-notes/4を見てみましたが、わかりません。 dataSetとdataTestは、本質的に同じ値を持ちます。なぜdataTestでも動作しますが、データセットはありません。あなたが、配列を見て、データテーブルは、配列のように見え、配列ではなく、文字列を期待するのでダメ文字列として配列を（マークアップすることを決めたようだあなたdoc linkを見てみるとJavascriptを使用して入力データを動的に構築するDataTablesが機能しません

dataSet = "["; 
 
for (prop = 0; prop < 26; prop++) 
 
{ 
 
    test = "['" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "'],"; 
 

 

 
    test = test.replace(/'/g, '"'); 
 
    // console.log(test); 
 
    dataSet = dataSet.concat(test); 
 
    // console.log(test.replace(/'/g, '"')); 
 
    // test = "'" + String(array0[prop]) + "' : '" + String(array1[prop]) + "'"; 
 
    // console.log(JSON.stringify(test)); 
 
} 
 
    end = "]"; 
 
    dataSet = dataSet.concat(end); 
 
    console.log(dataSet); 
 
    
 
var dataTest = [["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"],["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],["2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2"],["3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3"],["4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4"],["5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5"],["6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6"],["7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7"],["8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8"],["9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9"],["10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10"],["11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11"],["12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12"],["13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13"],["14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14"],["15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15"],["16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16"],["17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17"],["18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18"],["19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19"],["20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20"],["21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21"],["22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22"],["23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23"],["24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24"],["25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25"],] 
 

 

 
    $(document).ready(function() { 
 
    $('#example').DataTable({ 
 
     data: dataSet, 
 
     columns: [{ 
 
      title: "C1" 
 
     }, 
 
     { 
 
      title: "C2" 
 
     }, 
 
     { 
 
      title: "C3" 
 
     }, 
 
     { 
 
      title: "C4" 
 
     }, 
 
     { 
 
      title: "C5" 
 
     }, 
 
     { 
 
      title: "C6" 
 
     }, 
 
     { 
 
      title: "C7" 
 
     }, 
 
     { 
 
      title: "C8" 
 
     }, 
 
     { 
 
      title: "C9" 
 
     }, 
 
     { 
 
      title: "C10" 
 
     }, 
 
     { 
 
      title: "C11" 
 
     }, 
 
     { 
 
      title: "C12" 
 
     }, 
 
     { 
 
      title: "C13" 
 
     }, 
 
     { 
 
      title: "C14" 
 
     }, 
 
     { 
 
      title: "C15" 
 
     }, 
 
     { 
 
      title: "C16" 
 
     }, 
 
     { 
 
      title: "C17" 
 
     }, 
 
     { 
 
      title: "C18" 
 
     }, 
 
     { 
 
      title: "C19" 
 
     }, 
 
     { 
 
      title: "C20" 
 
     }, 
 
     ] 
 
     // columns: [ 
 
     //  { title: "Name" }, 
 
     //  { title: "Position" }, 
 
     //  { title: "Office" }, 
 
     //  { title: "Extn." }, 
 
     //  { title: "Start date" }, 
 
     //  { title: "Salary" } 
 
     // ] 
 
    }); 
 
    });

<!-- DataTables CSS --> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
 

 
<!-- jQuery --> 
 
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script> 
 

 
<!-- DataTables --> 
 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<table id="example" class="display" width="100%"></table>

出典

2017-12-05 user3163920

、あなたは、配列のように見える文字列を作成していますか？ –

はい、Javascriptのソースデータの例「https://datatables.net/examples/data_sources/js_array.html」を見て、基本的にforループを使用して複製しようとしました。私は実際にPython（Flask）から渡された実際のデータを持つ20の配列のデータを持っています。彼らはあまりにも多くここに配置するので、私は質問を単純化した。 – user3163920

）。あなたがしなければならないのは、JavaScript arraysを使って配列を作成することです。それは（再び）実際の配列ではなく、配列の下

のように見える文字列であるので、それはあなたと変数dataTestを働い

は、データ・テーブルにデータを正しく作成する方法の一例です。 ``のdataSetと

$(document).ready(function() { 
 

 
    var dataSet = []; 
 
    for (var prop = 0; prop < 5; prop++) { 
 
    var innerArray = []; 
 
    for (var innerProp = 0; innerProp < 3; innerProp++) { 
 
     innerArray.push(innerProp); 
 
    } 
 
    dataSet.push(innerArray); 
 
    } 
 
    //console.log(dataSet); 
 

 
    $('#example').DataTable({ 
 
    data: dataSet, 
 
    columns: [{ 
 
     title: "C1" 
 
     }, 
 
     { 
 
     title: "C2" 
 
     }, 
 
     { 
 
     title: "C3" 
 
     } 
 
    ] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<!-- DataTables CSS --> 
 
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
 

 
<!-- jQuery --> 
 
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script> 
 

 
<!-- DataTables --> 
 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 
<table id="example" class="display" width="100%"></table>

出典

2017-12-05 17:53:21

これは助けになりました。ありがとう！ – user3163920

Javascriptを使用して入力データを動的に構築するDataTablesが機能しません

答えて

関連する問題