2017-10-23 16 views
0

DataTableを読み込むときにエラーが発生します。私は何かが間違っているのを見ない。私のテーブルが正しいと私はテーブルを作成した後にDataTable()をロードしています。私はDropboxのを変更するとエラーがここにあるテーブルJqueryでテーブルを作成する

をリロードするとき、私はすべてのエラーを取得いけないことに注意してください:$('#dataTable').dataTable();

問題は何ですか?これは、Datableスクリプトが動作しないために修正する必要があります。

Uncaught TypeError: Cannot read property 'mData' of undefined at HTMLTableCellElement. (jquery.dataTables.js:1197) at Function.each (jquery-1.9.1.js:648) at init.each (jquery-1.9.1.js:270) at HTMLTableElement. (jquery.dataTables.js:1194) at Function.each (jquery-1.9.1.js:648) at init.each (jquery-1.9.1.js:270) at init.DataTable [as dataTable] (jquery.dataTables.js:869) at HTMLDocument. (accounts.js:172) at fire (jquery-1.9.1.js:1037) at Object.fireWith [as resolveWith] (jquery-1.9.1.js:1148)

$(document).ready(function() { 
 

 
    var types = []; 
 
    var amountOfDayEnds = parseInt($('#amountOfDayEnds').val()); 
 

 
    function DisplayTable() { 
 
     var data; 
 
     //Table 
 
     $('.dataTableBody').empty(); 
 
     for(var i=1;i<=amountOfDayEnds;i++) { 
 
      data += '<tr align="center">'; 
 
      data += '<td>' + i + '</td>'; 
 
      $.each(types, function (index, value) { 
 
       data += '<td>' + '<input class="text-center amountOfAccounts" type="number" value="0" name="amountOfAccounts-' + value + '" data-error="Please, insert a value" required>' + '</td>' 
 
      }); 
 
      data += '</tr>'; 
 
     } 
 
     $('.dataTableBody').append(data); 
 
    } 
 

 

 
//Repeat the value for all rows in Clients Table 
 
    $('.repeatForAll').change(function() { 
 
     var number = $('.repeatForAll').val(); 
 
     $('.amountOfClients').val(number); 
 
    }); 
 

 
    
 

 

 
    //create the interdepent selectors 
 
    function initSelectors(){ 
 
     // next 2 statements should generate error message, see console 
 
     MAIN.createRelatedSelector(); 
 
     MAIN.createRelatedSelector(document.querySelector('#cls')); 
 

 
     //countries 
 
     MAIN.createRelatedSelector 
 
     (document.querySelector('#cls')   // from select element 
 
      ,document.querySelector('#group')  // to select element 
 
      ,{            // values object 
 
       Deposit: ['DDA','SAV'], 
 
       Loan: ['MTG'], 
 
      } 
 
      ,function(a,b){return a>b ? 1 : a<b ? -1 : 0;} // sort method 
 
     ); 
 
    } 
 

 
//create MAIN namespace 
 
    (function(ns){ // don't pollute the global namespace 
 

 
     function create(from, to, obj, srt){ 
 
      if (!from) { 
 
       throw CreationError('create: parameter selector [from] missing'); 
 
      } 
 
      if (!to) { 
 
       throw CreationError('create: parameter related selector [to] missing'); 
 
      } 
 
      if (!obj) { 
 
       throw CreationError('create: related filter definition object [obj] missing'); 
 
      } 
 

 
      //retrieve all options from obj and add it 
 
      obj.all = (function(o){ 
 
       var a = []; 
 
       for (var l in o) { 
 
        a = /array/i.test (o[l].constructor) ? a.concat(o[l]) : a; 
 
       } 
 
       return a.sort(srt); 
 
      }(obj)); 
 
      // initialize and populate to-selector with all 
 
      populator.call(from 
 
       ,null 
 
       ,to 
 
       ,obj 
 
       ,srt 
 
      ); 
 

 
      // assign handler 
 
      from.onchange = populator; 
 

 
      function initStatics(fn,obj){ 
 
       for (var l in obj) { 
 
        if (obj.hasOwnProperty(l)){ 
 
         fn[l] = obj[l]; 
 
        } 
 
       } 
 
       fn.initialized = true; 
 
      } 
 

 
      function populator(e, relatedto, obj, srt){ 
 
       // set pseudo statics 
 
       var self = populator; 
 
       if (!self.initialized) { 
 
        initStatics(self,{optselects:obj,optselectsall:obj.all,relatedTo:relatedto,sorter:srt || false}); 
 
       } 
 

 
       if (!self.relatedTo){ 
 
        throw 'not related to a selector'; 
 
       } 
 
       // populate to-selector from filter/all 
 
       var optsfilter = this.selectedIndex < 1 
 
        ? self.optselectsall 
 
        : self.optselects[this.options[this.selectedIndex].firstChild.nodeValue] 
 
        ,cselect = self.relatedTo 
 
        ,opts = cselect.options; 
 
       if (self.sorter) optsfilter.sort(self.sorter); 
 
       opts.length = 0; 
 
       for (var i=0;i<optsfilter.length;i+=1){ 
 
        opts[i] = new Option(optsfilter[i],optsfilter[i]); 
 
       } 
 
      } 
 
     } 
 

 
     // custom Error 
 
     function CreationError(mssg){ 
 
      return {name:'CreationError',message:mssg}; 
 
     } 
 

 
     // return the create method with some error handling 
 
     window[ns] = { 
 
      createRelatedSelector: function(from,to,obj,srt) { 
 
       try { 
 
        if (arguments.length<1) { 
 
         throw CreationError('no parameters'); 
 
        } 
 
        create.call(null,from,to,obj,srt); 
 
       } 
 
       catch(e) { console.log('createRelatedSelector ->',e.name,'\n' 
 
        + e.message + 
 
        '\ncheck parameters'); } 
 
      } 
 
     }; 
 
    }('MAIN')); 
 

 
    //initialize 
 
    initSelectors(); 
 

 
    //get account types based on group 
 
    $('#group').change(TypesChanged); 
 
    $('#cls').change(TypesChanged); 
 

 
    function TypesChanged() { 
 
     selectedGroup = $('#group').val(); 
 
     switch (selectedGroup) { 
 
      case "DDA": 
 
       types = ["400","4044","4045"]; 
 
       break; 
 
      case "SAV": 
 
       types = ["300","310"]; 
 
       break; 
 
      case "MTG": 
 
       types = ["700","710"]; 
 
       break; 
 
     } 
 
     console.log("Selected group: " + selectedGroup + ", Types: " + types); 
 
     $('.dataTableHead').empty(); 
 
     $('.dataTableFooter').empty(); 
 
     $('.dataTableHead').append('<th class="text-center">Day</th>'); 
 
     $('.dataTableFooter').append('<th class="text-center">Day</th>'); 
 
     var columnNames = []; 
 
     $.each(types, function (index, value) { 
 
      columnNames += '<th class="text-center">Type ' + value + '</th>'; 
 
     }); 
 
     $('.dataTableHead').append(columnNames); 
 
     $('.dataTableFooter').append(columnNames); 
 
     DisplayTable(); 
 
    } 
 

 
    TypesChanged(); 
 
    $('#dataTable').dataTable(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Page level plugin JavaScript--> 
 
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 
 

 

 
       <div class="row text-right"> 
 
         <label> 
 
          Show 
 
          <select name="cls" id="cls"> 
 
           <option value="All">All</option> 
 
           <option value="Deposit">Deposit</option> 
 
           <option value="Loan">Loan</option> 
 
          </select> 
 
         </label> 
 
        </div> 
 
        <div class="row"> 
 
         <label> 
 
          Show 
 
          <select name="group" id="group"> 
 
           <%--Jquery--%> 
 
          </select> 
 
         </label> 
 
        </div> 
 
       </div> 
 

 
        <div class="table-responsive"> 
 
         <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> 
 
          <thead class="dataTableHead"> 
 
          <tr> 
 
           
 
          </tr> 
 
          </thead> 
 
          <tfoot class="dataTableFooter"> 
 
          <tr> 
 
           
 
          </tr> 
 
          </tfoot> 
 
          <tbody class="dataTableBody"> 
 
          
 
          </tbody> 
 
         </table>

+0

"をいただきました問題は、" - >あなたは問題が貼り付けられている、まだあなたはまだ聞いて? 'Uncaught TypeError:プロパティ 'mData' undefinedの読み込みができません。 'が問題です。つまり、変数mDataはどこのページにも定義されていません...コード内の変数はどこですか? – ProEvilz

+0

その変数はDataTableスクリプトのものです。 https://datatables.net/examples/basic_init/zero_configuration.html。私のコードのためにエラーがあります。 –

答えて

0

まず第一に:$('#amountOfDayEnds')は、要素がページに欠けている、どこに言及されていないボディは全く発生していないので、行がない、何もします塗りつぶす。問題を発見

.emptyコール

は(TypesChanged関数でTRを追加した後、テーブルは次のセレクタで)ヘッダーとフッターにテーブルの行が欠落している: から:

$('.dataTableHead').empty(); $('.dataTableFooter').empty(); $('.dataTableHead').append('<th class="text-center">Day</th>'); $('.dataTableFooter').append('<th class="text-center">Day</th>');

$('.dataTableHead').append(columnNames); $('.dataTableFooter').append(columnNames);

から:

$('.dataTableHead tr').empty(); $('.dataTableFooter tr').empty(); $('.dataTableHead tr').append('<th class="text-center">Day</th>'); $('.dataTableFooter tr').append('<th class="text-center">Day</th>');

$('.dataTableHead tr').append(columnNames); $('.dataTableFooter tr').append(columnNames);

+0

それがあります。そうではありませんが。私は上記の隠された入力を持っています。私はそこに置くのを忘れた。テーブルは正しく表示されていますが、DataTable()を適用できません –

+0

更新された回答を見る –

関連する問題