用PHP+MySQL+jQuery+Ajax拖放排序修改數據庫 · 前端開發

index.php ``` <?php $connect = mysqli_connect("localhost", "root", "123456", "testing"); $query = "SELECT * FROM page ORDER BY page_order ASC"; $result = mysqli_query($connect, $query); ?> <html> <head> <title>用PHP+MySQL+jQuery+Ajax拖放排序修改數據庫</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="menu_website_form_box list-unstyled" id="page_list"> <?php while($row = mysqli_fetch_array($result)) { echo '<li id="'.$row["page_id"].'">'.$row["page_order"].' | '.$row["page_title"].'</li>'; } ?> </div> </body> </html> <style> #page_list li { padding:15px 15px 15px 15px; background-color:#fff; border:1px dotted #ccc; cursor:move; } </style> <script> $(document).ready(function(){ $( "#page_list" ).sortable({ placeholder : "ui-state-highlight", update : function(event, ui) { var page_id_array = new Array(); $('#page_list li').each(function(){ page_id_array.push($(this).attr("id")); }); $.ajax({ url:"data.php", method:"POST", data:{page_id_array:page_id_array}, success:function(data) { // alert(data); console.log(data); } }); } }); }); </script> ``` data.php ``` <?php //update.php $connect = mysqli_connect("localhost", "root", "123456", "testing"); for($i=0; $i<count($_POST["page_id_array"]); $i++) { $query = " UPDATE page SET page_order = '".$i."' WHERE page_id = '".$_POST["page_id_array"][$i]."'"; mysqli_query($connect, $query); } echo 'Page Order has been updated'; ``` database sql: ``` -- -- 數據庫： `testing` -- -- -------------------------------------------------------- -- -- 表的結構 `page` -- CREATE TABLE `page` ( `page_id` int(11) NOT NULL, `page_title` text NOT NULL, `page_url` text NOT NULL, `page_order` int(11) DEFAULT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- 轉存表中的數據 `page` -- INSERT INTO `page` (`page_id`, `page_title`, `page_url`, `page_order`) VALUES (1, 'JSON - Dynamic Dependent Dropdown List using Jquery and Ajax', 'json-dynamic-dependent-dropdown-list-using-jquery-and-ajax', 2), (2, 'Live Table Data Edit Delete using Tabledit Plugin in PHP', 'live-table-data-edit-delete-using-tabledit-plugin-in-php', 5), (3, 'Create Treeview with Bootstrap Treeview Ajax JQuery in PHP\r\n', 'create-treeview-with-bootstrap-treeview-ajax-jquery-in-php', 9), (4, 'Bootstrap Multiselect Dropdown with Checkboxes using Jquery in PHP\r\n', 'bootstrap-multiselect-dropdown-with-checkboxes-using-jquery-in-php', 0), (5, 'Facebook Style Popup Notification using PHP Ajax Bootstrap\r\n', 'facebook-style-popup-notification-using-php-ajax-bootstrap', 3), (6, 'Modal with Dynamic Previous & Next Data Button by Ajax PHP\r\n', 'modal-with-dynamic-previous-next-data-button-by-ajax-php', 6), (7, 'How to Use Bootstrap Select Plugin with Ajax Jquery PHP\r\n', 'how-to-use-bootstrap-select-plugin-with-ajax-jquery-php', 7), (8, 'How to Load CSV File data into HTML Table Using AJAX jQuery\r\n', 'how-to-load-csv-file-data-into-html-table-using-ajax-jquery', 8), (9, 'Autocomplete Textbox using Typeahead with Ajax PHP Bootstrap\r\n', 'autocomplete-textbox-using-typeahead-with-ajax-php-bootstrap', 4), (10, 'Export Data to Excel in Codeigniter using PHPExcel\r\n', 'export-data-to-excel-in-codeigniter-using-phpexcel', 1); -- -- 轉儲表的索引 -- -- -- 表的索引 `page` -- ALTER TABLE `page` ADD PRIMARY KEY (`page_id`); -- -- 在導出的表使用AUTO_INCREMENT -- -- -- 使用表AUTO_INCREMENT `page` -- ALTER TABLE `page` MODIFY `page_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11; COMMIT; ```