jQuery DataTablesリロード間隔エラー

間隔でロードするテーブルを取得しようとしています。jQuery DataTablesリロード間隔エラー

TypeError: g is null

ユーザーはフォームパラメータを入力してから、クリックイベントが発生した送信ボタンを押します。次のように：

$('#example').DataTable().ajax.reload();

お知らせテーブル名は 'でした：

$('.searchSubmit').on('click', function() 
{ 
    var data = { 
    searchCriteria: { 
     bill: $('#import_bill').val(), 
     ramp: $('#import_ramp').val(), 
     // few other parameters 
    } 
    }; 

    $.ajax({ 
    url: 'api/railmbs.php', 
    type: 'POST', 
    data: data, 
    dataType: 'html', 
    success: function(data, textStatus, jqXHR) 
    { 
     var jsonObject = $.parseJSON(data); 
     var table = $('#example1').DataTable({  
     "data": jsonObject, 
     "columns": [ 
      { "data": "BILL" }, 
      { "data": "RAMP" }, 
      // few more columns 
     ], 
     "iDisplayLength": 25, 
     "paging": true, 
     "bDestroy": true, 
     "stateSave": true, 
     "autoWidth": true 
     }); 

     var idle = 0; 
     var idelInterval = setInterval(timer, 10000); 
     $(this).mousemove(function(e){idle = 0;}); 
     $(this).keypress(function(e){idle = 0;}); 
     function timer() 
     { 
     idle = idle + 1; 
     if(idle > 2) 
     { 
      $('#example1').DataTable().ajax.reload(); // <--error occurs here 
      console.log('table reloaded');   
     } 
     } 
    }, 
    error: function(jqHHR, textStatus, errorThrown) 
    { 
     console.log('fail'); 
    } 
    }); 
});

をここで私は、エラーが発生した場所を指摘ところ、私はもともとそれはこのように見ていた、上記...面白い部分ですexample1 'の代わりに' example 'と入力します。テーブルIDは実際にはexample1です。なぜなら私は成功関数が始まる場所の近くに示したからです。リロード間隔が異なるテーブルIDを見ているのを見たとき、私はそれを変更しました。これは現在、エラーを上部に引き起こしています。

正しいIDではないため、IDを「example」としておく必要はありません。

これで、エラーが発生するのはなぜですか？

出典

2017-11-21 John Beasley

毎回初期化するのではなく、DataTable APIへの参照を保存してください – charlietfl

@charlietfl - 私はそれをどのように行うのでしょうか？ –

あなたは既に 'table'を持っています。そして、' table.ajax.reload（） 'を使用してください。 – charlietfl

私はこのトリックを行うと思われるソリューションを試しました。私はできるだけシンプルにこれを保つように努めましたが、jQueryを組み込んでいて、あなたの問題を解決しました。

index.htmlを

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Ajax Reloader</title> 
</head> 

<body> 

    <header> 
     <h1>AJAX Reloader</h1> 
    </header> 

    <section> 
     <form id="theForm"> 
      <input id="theButton" type="button" value="Click me to load data"> 
     </form> 
    </section> 

    <section> 
     <p> 
     <h3>Data Reload in: <span id="reloadCounter">5</span></h3> 
    </section> 

    <section> 
     <table id="theTable"></table> 
    </section> 

    <template id="theTemplate"> 
     <tr> 
      <td>Name:</td> 
      <td data-js></td> 
     </tr> 
    </template> 

    <script 
     src="https://code.jquery.com/jquery-3.2.1.min.js" 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"> 
    </script> 

    <script> 
     (function() { 
      const $btn = $('#theButton'); 
      const $tbl = $('#theTable'); 
      const $tmpl = $('#theTemplate'); 
      const $span = $('#reloadCounter'); 

      let isLoading = false; 
      let counter = 5; 

      // Load data on Button click. 
      $btn.click(() => { 
       loadData(true); 
      }); 

      // Auto-reload table data every 5 seconds. 
      // Add a countdown, just for gits and shiggles 
      window.setInterval(() => { 
       if (counter === 0) { 
        loadData(false); 
        counter = 5; 
       } else { 
        counter--; 
       } 

       $span[0].textContent = counter.toString(); 

      }, 1000); 

      function loadData(isBtnClick) { 
       if (!isLoading) { 
        isLoading = true; 

        let file = (isBtnClick) ? 'data1' : 'data2'; 

        $.ajax({ 
         url: `./${file}.json`, 
         type: 'GET', 
         dataType: 'json', 
         success: (data, status) => { 
          console.log('loadData::success - Got data!', data); 
          $tbl[0].innerHTML = ''; 

          let td = $tmpl[0].content.querySelector('td[data-js]'); 

          data.forEach((item, idx, arr) => { 
           td.textContent = item.name; 
           let tr = document.importNode($tmpl[0].content, true); 
           $tbl[0].appendChild(tr); 
          }); 

          isLoading = false; 
         } 
        }); 

        if (isBtnClick) { 
         console.log('loadData - Button clicked'); 
        } else { 
         console.log('loadData - Interval triggered'); 
        } 
       } 
      } 
     })(); 
    </script> 
</body> 
</html>

data1.json Cの

[ 
    {"name": "Rincewind"}, 
    {"name": "Mustrum Ridcully"}, 
    {"name": "Ponder Stibbons"}, 
    {"name": "Gaspode The Wonder Dog"}, 
    {"name": "CMOT Dibbler"}, 
    {"name": "Nanny Ogg"} 
]

data2.json

[ 
    {"name": "Jason Ogg"}, 
    {"name": "Tiffany Aching"}, 
    {"name": "Rob Anybody"}, 
    {"name": "Mrs. Cake"}, 
    {"name": "Nobby Nobbs"}, 
    {"name": "Fred Colon"} 
]

私のスタイルをあなたのものとは少し異なりますが、同じ基本的な概念がここにあるべきです。

希望します。 :-)

出典

2017-11-21 19:13:05 Oook

ajax.reload()はどのように機能しますか？ AJAXは使用されていないので、リロードする前のAJAXはありません。代わりに（概略図）、これを行います。

var table = $('#example1').DataTable({  
    ajax: { 
    url: 'api/railmbs.php', 
    data: function() { 
     return { 
      searchCriteria: { 
      bill: $('#import_bill').val(), 
      ramp: $('#import_ramp').val(), 
      // few other parameters 
      } 
     } 
    } 
    }, 
    "columns": [ 
     { "data": "BILL" }, 
     { "data": "RAMP" }, 
     // few more columns 
    ], 
    "iDisplayLength": 25, 
    "paging": true, 
    "bDestroy": true, 
    "stateSave": true, 
    "autoWidth": true 
});

今、あなたは、tableが利用可能であるどこからでもtable.ajax.reload()にできるはずです。

出典

2017-11-22 15:28:08 davidkonrad

jQuery DataTablesリロード間隔エラー

答えて

関連する問題