jQuery UI Sortable – Husk positioner med MySQLi
I denne tutorial vil jeg vise, hvordan man hurtigt og nemt kan lave et sorterings system med jQuery UI og MySQLi, som gemmer positionerne i en database.
Jeg har i denne tutorial valgt at bruge jQuery UIs CSS fil, men man kan vælge at style sorterings systemet som man selv vil.
Hvis du har problemer med at når du opdatere siden, så går elementerne tilbage, så prøv at opdater med Ctrl+F5. Hvis elementer sidder rigtigt der, så er det din cache som driller. Kontakt da din host for at høre hvordan du løser problemet.
Database struktur:
index.php | HTML/PHP kode:
<?php
require 'config.php';
$query = mysqli_query($mysqli, "SELECT * FROM `sortering` ORDER BY `order`"); //Opdater query til at hente egne informationer
?>
<ul id="sortable">
<?php
while($row = mysqli_fetch_assoc($query)) {
echo '<li id="sortering_'. $row['id'] .'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>'. $row['navn'] .'</li>'; //Opdater array til at vise egne informationer
}
?>
</ul>
main.css | CSS kode:
#sortable {
list-style-type: none;
margin: 0; padding: 0;
width: 20%;
}
#sortable li {
margin: 0 3px 3px 3px;
padding: 0.4em;
padding-left: 1.5em;
font-size: 1.4em;
height: 18px;
}
#sortable li span {
position: absolute;
margin-left: -1.3em;
}
main.js | JavaScript kode:
$(document).ready(function() {
$('#sortable').sortable({
opacity: 0.6,
cursor: 'move',
update: function() {
var order = $(this).sortable('serialize', { key: 'data[]' });
$.ajax('order.php', {
type: 'POST',
data: order
});
}
});
});
order.php | PHP kode:
<?php
require 'config.php';
$id = $_POST['data'];
$liste_start = 1;
foreach($id as $data_id) {
$query = mysqli_query($mysqli, "UPDATE `sortering` SET `order` = $liste_start WHERE `id` = $data_id"); //Opdater query til at indsætte i egen database
$liste_start++;
}
?>
Hele index.php og config.php
index.php
<?php
require 'config.php';
$query = mysqli_query($mysqli, "SELECT * FROM `sortering` ORDER BY `order`"); //Opdater query til at hente egne informationer
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Sortable - Husk positioner med MySQLi</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="main.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="main.js"></script>
</head>
<body>
<ul id="sortable">
<?php
while($row = mysqli_fetch_assoc($query)) {
echo '<li id="sortering_'. $row['id'] .'" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>'. $row['navn'] .'</li>'; //Opdater array til at vise egne informationer
}
?>
</ul>
</body>
</html>
config.php
<?php $host = ''; //Indsæt egen vært/host $brugernavn = ''; //Indsæt eget brugernavn $kodeord = ''; //Indsæt eget kodeord $database = ''; //Indsæt egen database $mysqli = mysqli_connect($host, $brugernavn, $kodeord, $database); mysqli_set_charset($mysqli, 'utf8'); ?>
Eksempel: jQuery UI Sortable
Download: jQuery UI Sortable
Lige noget man skal tænke på. i din tekst her på siden hedder din tabel sortering. men i den du kan downloade hedder den jquery-ui-sortable.
så hvis man bruger din sql dump og skriver teksten herinde fra virker dette ikke. men bare ændre tabelnavnet. så kører det..
takker mange gange
Så er download filen opdateret, så den passer til koden herinde på siden! Tak for kommentaren omkring det, koder flere forskellige steder, så havde lige fået den forkerte version ind. :D
Og glad for det kan være til hjælp. :)