Good day to all.

There is a DB / Table, in which there are about 50 records, and from it 3 records are output (14, 15, 16 - each in the form of a small table). Actually on the sides of the table are buttons +/-, the meaning of which is in scrolling through selected records from tables. in a primitive way, the page reloads (it loads already 15, 16 17 entries if you press -). I want to do something without reloading the page. In terms of Ajax - armed only with theory, and could not independently write a script.

Can anyone help with advice or code how to make a new choice of data without reloading the page?

ps I take the first step in Ajax.

  • judging by your nickname, you can't switch the layout either :) - Vitalii Maslianok

2 answers 2

Suppose there is a table and 2 buttons:

<table id="data"> </table> <a id="prev" class="button">Предыдущая</a> <a id="next" class="button">Следующая</a>

We connect jQuery. The code will look something like this:

 var startid=1; $(".button").click(function() { startid = ($(this).id()=="next") ? startid+=3 : startid-=3 if (startid > 0) { $.ajax({ type: "POST", url: "get_row.php", dataType : "text", data: {startid: startid}, success: function (data) { //Тут обрабатываем и выводим данные. Если в пхп сгенерим уже готовый хтмл код, то просто аппендим его в таблицу //$("#data").append(data); //для теста выведем их алертом alert (data); }, error: function(xhr, str){ alert('Возникла ошибка: ' + xhr.responseCode); } }); } else { startid=1; alert("Достигнуто начало записей"); } });

In php file get_row.php we need to get the data $start_id = $_POST['startid'] , process it and display the result in the form <tr><td>..</td><td>..</td></tr>

    Well, I would make an event handler for a click on the plus / minus, which would send to the server data about the required data interval using XmlHttpRequest , but how to choose data on a server is already as convenient for someone. You can, for example, use the PagedDataSource for this. They say that helps in this case. After sampling from the database, serialize it all into JSON, return JSON to the client and actually output the data you need to a table on the page using JavaScript =)