Javascript를 통해 입력 데이터를 동적으로 생성하는 DataTables가 작동하지 않습니다.

동적으로 테이블을 채우려고합니다. 다음은 내 코드입니다. dataTest에는 for 루프 다음에 데이터 세트의 최종 출력이 포함됩니다. dataTest을 테이블의 입력으로 사용하면 테이블이 제대로 작동하고 채워집니다. 그러나 데이터 세트을 사용하면 오류가 발생합니다. DataTables 경고 : table id = example - 행 0, 열 1에 알 수없는 매개 변수 '1'이 요청되었습니다.. 나는 이것에 대해 https://datatables.net/manual/tech-notes/4을 보았지만 알아 내지 못했습니다. 데이터 세트 및 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

, 당신은 배열처럼 보이는 문자열을 만드는? –

예, 자바 스크립트 소스 데이터 예제 "https://datatables.net/examples/data_sources/js_array.html"에서 보았으며 기본적으로 for 루프를 사용하여 복제하려고했습니다. 실제로 파이썬 (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가 작동하지 않습니다.

답변

관련 문제