PHP: Динамическое перетаскивание строк таблицы в PHP MySQL с использованием jQuery Ajax
Динамическое перетаскивание строк таблицы в PHP Mysql с использованием jquery ajax. В этом руководстве вы узнаете, как создавать строки таблицы с динамическим перетаскиванием в PHP Mysql с помощью jquery ajax.
В этом примере вы узнаете, как использовать bootstrap, чтобы просто улучшить макет таблицы. И используйте jquery ui для создания сортируемой строки таблицы.
Обратите внимание, что вы можете использовать cdn js или css для обоих, поэтому вам не нужно загружать и сохранять в своей системе для этого примера.
После этого вы создадите таблицу «sorting_items» со столбцами id, title, description и position_order. И управляйте им на одной странице с помощью ajax.
Динамическое перетаскивание строк таблицы в PHP MySQL с использованием jQuery Ajax
Если вы хотите создать строки таблицы с динамическим перетаскиванием в php mysql с помощью ajax без перезагрузки веб-страницы, выполните следующие действия:
Шаг 1 - Создайте базу данных и таблицу
Прежде всего, перейдите на панель phpmyadmin и создайте базу данных и таблицу, используя следующие запросы sql:
CREATE TABLE IF NOT EXISTS `sorting_items` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`title` varchar(120) NOT NULL,
`description` text NOT NULL,
`position_order` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;Шаг 2 - Подключение к базе данных MySQL
На этом этапе вы создадите файл с именем db.php и обновите приведенный ниже код в своем файле.
Следующий код используется для создания подключения к базе данных MySQL в PHP. А также вы можете использовать этот php-код для извлечения, вставки, обновления или удаления записей из базы данных MySQL с использованием и без ajax:
<?php
$host='localhost';
$username='root';
$password='';
$dbname = "my_db";
$conn=mysqli_connect($host,$username,$password,"$dbname");
if(!$conn)
{
die('Could not Connect MySql Server:' .mysql_error());
}
?>Шаг 3 - Создайте HTML-код с перетаскиванием
На этом шаге отобразите данные в таблице HTML, а также перетащите их.
Итак, создайте файл index.php и добавьте в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Drag and Drop table rows in PHP Mysql</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="container">
<h3 class="text-center">Dynamic Drag and Drop table rows in PHP Mysql</h3>
<table class="table table-bordered">
<tr>
<th>#</th>
<th>Name</th>
<th>Defination</th>
</tr>
<tbody class="row_position">
<?php
require('db.php');
$sql = "SELECT * FROM sorting_items ORDER BY position_order";
$users = $mysqli->query($sql);
while($user = $users->fetch_assoc()){
?>
<tr id="<?php echo $user['id'] ?>">
<td><?php echo $user['id'] ?></td>
<td><?php echo $user['title'] ?></td>
<td><?php echo $user['description'] ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div> <!-- container / end -->
</body>
<script type="text/jаvascript">
$( ".row_position" ).sortable({
delay: 150,
stop: function() {
var selectedData = new Array();
$('.row_position>tr').each(function() {
selectedData.push($(this).attr("id"));
});
updateOrder(selectedData);
}
});
function updateOrder(data) {
$.ajax({
url:"ajax.php",
type:'post',
dаta:{position:data},
success:function(){
alert('your change successfully saved');
}
})
}
</script>
</html>Шаг 4 - Создайте Ajax.php
На этом этапе извлеките данные из базы данных с помощью запроса ajax. Итак, создайте файл ajax.php и перетащите данные таблицы в html, затем вставьте их в базу данных с помощью ajax без обновления или перезагрузки всей веб-страницы.
Итак, обновите следующий код в файле ajax.php:
<?php
require('db.php');
$position = $_POST['position'];
$i=1;
foreach($position as $k=>$v){
$sql = "Update sorting_items SET position_order=".$i." WHERE id=".$v;
$mysqli->query($sql);
$i++;
}
?>В этом руководстве вы узнали, как создавать строки таблицы с динамическим перетаскиванием в php mysql с помощью jquery ajax без перезагрузки или обновления всей веб-страницы.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.