Question

我正试图让我的桌子按时加载。我现在收到以下错误：

TypeError: g is null

用户将输入表单参数，然后单击具有单击事件的提交按钮。如下：

$('.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');
    }
  });
});

这是有趣的部分......上面，我指出错误发生的地方，我原来看起来像这样：

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

请注意，表名是'example'而不是'example1'。表ID实际上是example1，因为我指出了成功函数开始的位置附近。当我看到重新加载间隔正在查看不同的表ID时，我更改了它，现在导致错误在顶部。

我认为我不应该将ID保留为'示例'，因为这不是正确的ID。

话虽如此，我为什么会收到错误？

Answer 1

我找到了一个似乎可以解决问题的解决方案。我尽量保持这个尽可能简单，同时仍然使用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

[
  {"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"}
]

我的编码风格与你的风格略有不同，但这里应该有相同的基本概念。

希望它有所帮助。： - ）

Answer 2

您希望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.ajax.reload()可用的任何地方table。

jQuery DataTables重载间隔错误

2 个答案: