Ajax bootstrap beautifies the web page and implements page loading and deletion and viewing details. ajaxbootstrap
Bookdetail: beautify the page:
Bootstrap is an open-source front-end development toolkit launched by Twitter.
It was developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework.
Bootstrap provides elegant HTML and CSS specifications, which are written by the dynamic CSS language Less.
Since its launch, Bootstrap has become a popular open-source project on GitHub. It is used by Breaking News of NASA's MSNBC (Microsoft National Broadcasting Corporation.
You only need to reference some defined classes, that is, the class name, to create a webpage with a very beautiful style, and support self-adaptation, is a very good framework.
Call file:
<link href="dist/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet" type="text/css" /> <script src="jquery-1.11.2.min.js"></script> <script src="dist/js/bootstrap.min.js"></script>
If you want to reference multiple JS files that contain jquery, The jquery file must be placed first.
Next is the beautification of the table.
Stripe table:
<Table class = "table-striped"> <thead> <tr> <td> Code </td> <td> name </td> <td> operation </td> </tr> </thead> <tbody id = "td"> </tbody> </table>
Add the details button, and change the two button styles to beautify;
$. Ajax ({url: "jiazai. php ", // display all data without writing data dataType:" TEXT ", success: function (data) {var str =" "; var hang = data. split ("|"); // split the string for (var I = 0; I
Click events for viewing details:
// Add the event function addxiangqing () {$ (". xq "). click (function () {$ ('# mymodal '). modal ('show ') // open the modal box var ids = $ (this ). attr ("ids"); $. ajax ({url: "xiangqing. php ", data: {ids: ids}, dataType:" TEXT ", type:" POST ", success: function (data) {// split var lie = data. split ("^"); var str = "<div> Code:" + lie [0] + "</div> <div> Name: "+ lie [1]" </div> "; // create a string var str =" <div> code: "+ lie [0] +" </div> <div> name: "+ lie [1] +" </div> "; $ ("# nr" character .html (str) ;}}); // the content to be displayed in the modal box })}
The details page is displayed:
<?php$ids = $_POST["ids"];include ("db.class.php");$db = new db();$sql = "select * from min where ids = '{$ids}'";echo $db->strQuery($sql);
Here, the concatenated string and the call are written into the encapsulation class file, so you can directly reference strQuery.
Figure:
Total Page code:
Table Page:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> untitled document </title> <link href =" dist/css/bootstrap.min.css "rel =" external nofollow "rel =" external nofollow "rel = "stylesheet" type = "text/css"/> <script src = "jquery-1.11.2.min.js"> </script> <script src = "dist/js/bootstrap. min. js "> </script> <style type =" text/css ">. xq {margin-left: 5px ;}</style>
Load:
<? Phpinclude ("db. class. php "); $ db = new db (); $ SQL =" select * from min "; $ arr = $ db-> Query ($ SQL ); // traverse $ str = ""; foreach ($ arr as $ v) {$ str = $ str. implode ("-", $ v ). "|"; // use-to combine $ v. The combination is 1-red, 2-blue, separated by |, the combination is 1-red | 2-Blue |} $ str = substr ($ str, 0, strlen ($ str)-1); // capture the string: capture the length of the string-1 // strlen to obtain the string length echo $ str;
Delete processing page
<?phpinclude ("db.class.php");$db = new db();$ids = $_POST["ids"];$sql = "delete from min WHERE ids='{$ids}'";if($db ->Query($sql,0)){ echo "ok";}else{ echo "no";}
Details page:
<?php$ids = $_POST["ids"];include ("db.class.php");$db = new db();$sql = "select * from min where ids = '{$ids}'";echo $db->strQuery($sql);
Using Bootstrap is more beautiful than normal Web pages
The above section describes how to use Ajax bootstrap to beautify webpages and load, delete pages, and view details. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
