Динамическое изменение URL-адреса Ajax-запроса

Question

У меня есть обычные таблицы данных на моей веб-странице, они выглядят так:

$(document).ready(function() {

    var table = $('#mydb').DataTable({
        "serverSide": true,             
        "ajax": "/myapi/?item=free&format=datatables",
        "columns": [

            {data: "item",
            {data: "Price"},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

Эта таблица обновляется каждые 10 секунд, получая последние значения из моей базы данных.

Теперь,Я хотел бы добавить кнопку для динамического изменения содержимого веб-страницы, чтобы она извлекала значения из ?item=taken вместо ?item=free, не обновляя страницу.

Вот что я попробовал:

var myvar = 'item=free'

function ChangeVar(){
        myvar = 'item=taken'

    }

$(document).ready(function() {

    var table = $('#mydb').DataTable({
        "serverSide": true,             
        "ajax": "/myapi/?'+ myvar + '&format=datatables",
        "columns": [

            {data: "item",
            {data: "Price"},

        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

HTML

<button onclick="ChangeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>

Я добавил кнопку, которая указывает на функцию ChangeVar(), функция должна изменить имя главной переменной, которое используется взапрос ajax. Это не сработало, может быть, потому что я не использую область видимости переменной должным образом, и я думаю, что это не сработает, потому что Ajax является асинхронным, поэтому мне нужно добавить что-то еще.

Может кто-то указатьмне решение, которое будет работать для этой проблемы?

Answer 1

У вас есть синтаксические ошибки в этом коде, вы используете одинарную кавычку вместо двойной кавычки

"ajax": "/myapi/?'+ myvar + '&format=datatables"

, поэтому js принимает myvar как строку, а не как переменную. попробуйте

 "ajax": "/myapi/?"+ myvar + "&format=datatables"

также вы пропустили закрывающую скобку здесь {data: "item"

var table = $('#mydb').DataTable({
    "serverSide": true,             
    "ajax": "/myapi/?"+ myvar + "&format=datatables",
    "columns": [

        {data: "item"},
        {data: "Price"},

    ]
});

Answer 2

Есть одна проблема с вашим кодом

"ajax": "/myapi/?item=free&format=datatables",

Когда вы определяете ajax URL, URL будет сохранен в экземпляре таблицы, поэтому изменить переменную myvar не удастсяизмените URL внутри экземпляра таблицы. Но Datatable позволяет изменять URL-адрес ajax через API table.ajax.url (newURL) . Я также изменяю область видимости вашей переменной и функции, этот скрипт ниже будет работать

var myvar = 'item=free';
var table;
function ChangeVar(){
    myvar = 'item=taken'
    table.ajax.url("/myapi/?'+ myvar + '&format=datatables");
}

$(document).ready(function() {

    table = $('#mydb').DataTable({
        "serverSide": true,             
        "ajax": "/myapi/?'+ myvar + '&format=datatables",
        "columns": [
            {data: "item",
            {data: "Price"},

        ]
    });
    setInterval( function () {
        table.ajax.reload();
    }, 10000 );
});

Не уничтожать таблицу и воссоздавать новую, это плохо для производительности

Answer 3

DataTables имеет свой собственный метод динамического изменения URL ajax: table.ajax.url('URL'). Поэтому вам не нужно каждый раз уничтожать объект и создавать заново.

Я сделал приведенный ниже пример, чтобы интервал перезагружался для каждого интервала. Однако при использовании table.ajax.url('') вы можете использовать метод .load () для немедленного получения данных.

См. Этот пример:

$(document).ready(function() {
  let test = $('#example').DataTable({
    ajax: {
      url: 'https://jsonplaceholder.typicode.com/posts',
      dataSrc: ''
    },
    columns: [{
        data: 'userId'
      },
      {
        data: 'id'
      },
      {
        data: 'title'
      }
    ]

  });


  changeVar = function() {
    test.ajax.url("https://jsonplaceholder.typicode.com/albums");
  }

  setInterval(function() {
    test.ajax.reload();
    console.log("Interval");
  }, 10000);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />

<body>
  <button onclick="changeVar()" name="button5" type="submit" class="btn btn-primary">See taken items</button>
  <br><br>
  <div id="container">
    <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
          <th>Body</th>
        </tr>
      </thead>
    </table>
  </div>

</body>

Answer 4

Вы должны каждый раз уничтожать и инициализировать объект данных.

var table = null;

function ChangeVar() {
  table.destroy();
  table = $("#mydb").DataTable({
    serverSide: true,
    ajax: "/myapi/?item=taken&format=datatables",
    columns: [{ data: "item" }, { data: "Price" }]
  });
}

$(document).ready(function() {
  table = $("#mydb").DataTable({
    serverSide: true,
    ajax: "/myapi/?item=free&format=datatables",
    columns: [{ data: "item" }, { data: "Price" }]
  });
  setInterval(function() {
    table.ajax.reload();
  }, 10000);
});

больше информации: https://datatables.net/manual/tech-notes/3#destroy

Answer 5

Попробуйте вот так

function refreshDataTable(itemName) {
    var table = $('#mydb').DataTable({
        "serverSide": true,
        "ajax": "/myapi/?'+ myvar + '&format=datatables",
        "columns": [
            {data: "item"},
            {data: "Price"},
        ]
    });
    setInterval(function () {
        table.ajax.reload();
    }, 10000);
}

$(document).ready(function () {
    refreshDataTable('item=free');
    $('#change-item-btn').on('click', function (e) {
        e.preventDefault();
        refreshDataTable('item=taken');
    });
});

А в HTML

<button id="change-item-btn" name="button5" type="submit" class="btn btn-primary">See taken items</button>

Удачи, продолжайте кодировать.