八、使用 Ajax 和 jQuery
在本章中，我们将介绍:
- 从另一个页面获取数据
- 设置控制器以返回 JSON 数据
- 创建一个 Ajax 搜索函数
- 使用 Ajax 创建和验证用户
- 基于复选框选择过滤数据
- 制作一个 Ajax 简讯注册盒
- 使用 Laravel 和 jQuery 发送电子邮件
- 使用 jQuery 和 Laravel 创建可排序的表
简介
许多现代网络应用依赖 JavaScript 来添加动态用户交互。使用 jQuery 库和 Laravel 的内置函数，我们可以在自己的应用中轻松创建这些交互。
我们将从从其他页面异步接收数据开始，然后发送可以保存在数据库中的数据。
从另一个页面获取数据
在我们的应用中，可能会有需要从另一个页面访问一些 HTML 的时候。使用 Laravel 和 jQuery，我们可以很容易地完成这个任务。
做好准备
对于这个食谱，我们只需要一个标准的 Laravel 安装。
怎么做...
要完成此配方，请遵循给定的步骤:
-
打开
routes.php文件:```php Route::get('getting-data', function() { return View::make('getting-data'); });
Route::get('tab1', function() { if (Request::ajax()) { return View::make('tab1'); } return Response::error('404'); });
Route::get('tab2', function() { if (Request::ajax()) { return View::make('tab2'); } return Response::error('404'); }); ```
-
在
views目录中，创建一个名为tab1.php:php <h1>CHAPTER 1 - Down the Rabbit-Hole</h1> <p> Alice was beginning to get very tired of sitting by her sister on the bank,and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?' </p> <p> So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her. </p>的文件 3. 在
views目录下，创建一个名为tab2.php:php <h1>Chapter 1</h1> <p>"TOM!"</p> <p>No answer.</p> <p>"TOM!"</p> <p>No answer.</p> <p>"What's gone with that boy, I wonder? You TOM!"</p> <p>No answer.</p> <p> The old lady pulled her spectacles down and looked over them about the room; then she put them up and looked out under them. She seldom or never looked through them for so small a thing as a boy; they were her state pair, the pride of her heart, and were built for "style," not service—she could have seen through a pair of stove-lids just as well. She looked perplexed for a moment, and then said, not fiercely, but still loud enough for the furniture to hear: </p> <p>"Well, I lay if I get hold of you I'll—"</p> <p> She did not finish, for by this time she was bending down and punching under the bed with the broom, and so she needed breath to punctuate the punches with. She resurrected nothing but the cat. </p>的文件 4. 在
views目录中，创建一个名为getting-data.php:php <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Getting Data</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <ul> <li><a href="#" id="tab1" class="tabs">Alice In Wonderland</a></li> <li><a href="#" id="tab2" class="tabs">Tom Sawyer</a></li> </ul> <h1 id="title"></h1> <div id="container"></div> <script> $(function() { $(".tabs").on("click", function(e) {e.preventDefault(); var tab = $(this).attr("id"); var title = $(this).html(); $("#container").html("loading…"); $.get(tab, function(data) { $("#title").html(title); $("#container").html(data); }); }); }); </script> </body> </html>的文件 5. 在
http://{yourserver}/getting-data查看页面，点击链接加载内容。
它是如何工作的...
我们从设置路线开始。我们的第一条路线是显示链接，当我们点击它们时，内容将被加载到页面中。我们接下来的两条路线将包含显示在主页上的实际内容。为了确保这些页面不能被直接访问，我们使用Request::ajax()方法来确保只有 Ajax 请求被接受。如果有人试图直接访问该页面，它会将他们发送到错误页面。
我们的两个视图文件将包含一些书籍摘录。因为这将被加载到另一个页面，我们不需要完整的 HTML。然而，我们的主页是一个完整的网页。我们首先从谷歌的内容交付网络 ( CDN ) 加载 jQuery。然后，我们有一份我们想用的书的清单。为了让事情简单一点，链接的 ID 将对应于我们创建的路线。
当有人点击链接时，脚本将使用 ID 并从同名的路由中获取内容。结果将被载入我们的container分区。
设置控制器返回 JSON 数据
当我们使用 JavaScript 访问数据时，最简单的方法之一就是使用 JSON 格式的数据。在 Laravel 中，我们可以从其中一个控制器返回 JSON，供另一个页面上的 JavaScript 使用。
做好准备
对于这个食谱，我们需要一个标准的 Laravel 安装。
怎么做...
对于此配方，请遵循给定的步骤:
-
在
controllers目录中，创建一个名为BooksController.php:```php <?php
class BooksController extends BaseController {
public function getIndex() { return View::make('books.index'); }
public function getBooks() { $books = array('Alice in Wonderland','Tom Sawyer','Gulliver\'s Travels','Dracula','Leaves of Grass'); return Response::json($books); } } ```
的文件 2. 在
routes.php中，注册图书控制器php Route::controller('books', 'BooksController'); -
在
views目录中，创建一个名为books的文件夹，并在该文件夹中创建一个名为index.php:php <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Show Books</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <a href="#" id="book-button">Load Books</a> <div id="book-list"></div> <script> $(function() { $('#book-button').on('click', function(e) {e.preventDefault(); $('#book-list').html('loading...'); $.get('books/books', function(data) {var book_list = ''; $.each(data, function(){book_list += this + '<br>'; }) $("#book-list").html(book_list); $('#book-button').hide(); }); }); }); </script> </body> </html>的文件
它是如何工作的...
我们首先为我们的书单创建一个 RESTful 控制器，扩展了我们的BaseController类。我们的控制器有两种方法:一种显示列表，另一种返回格式化的列表。我们的getBooks()方法使用一个数组作为我们的数据源，我们使用 Laravel 的Response::json()方法自动为我们做正确的格式化。
在我们的主页面上，我们用 JavaScript 向页面发出get请求，接收 JSON，并循环显示结果。当我们循环时，我们将书籍添加到一个 JavaScript 变量中，然后将列表添加到我们的book-list div 中。
还有更多...
我们的列表可以来自任何数据源。我们可以添加数据库功能，甚至调用一个应用编程接口。当我们使用来自 Laravel 的 JSON 响应时，该值使用正确的头进行了正确的格式化。
创建 Ajax 搜索功能
如果我们想在应用中搜索信息，异步执行搜索可能会很有用。这样，用户就不必进入新的页面并刷新所有的资产。使用 Laravel 和 JavaScript，我们可以用非常简单的方式执行这个搜索。
做好准备
对于这个食谱，我们需要一个工作安装的 Laravel。
怎么做...
要完成此配方，请遵循以下步骤:
-
在
controllers目录中，创建一个名为SearchController.php:```php <?php
class SearchController extends BaseController {
public function getIndex() { return View::make('search.index'); }
public function postSearch() { $return = array(); $term = Input::get('term');
$books = array(array('name' => 'Alice in Wonderland', 'author' => 'Lewis Carroll'),array('name' => 'Tom Sawyer', 'author' => 'Mark Twain'),array('name' => 'Gulliver\'s Travels', 'author' =>'Jonathan Swift'),array('name' => 'The Art of War', 'author' => 'Sunzi'),array('name' => 'Dracula', 'author' => 'Bram Stoker'),array('name' => 'War and Peace', 'author' =>'LeoTolstoy'),);
foreach ($books as $book) { if (stripos($book['name'], $term) !== FALSE) $return[] =$book; }
return Response::json($return); } } ```
的文件 2. 在
routes.php文件中，注册控制器:php Route::controller('search', 'SearchController'); -
在
views目录中，创建一个名为search的文件夹，并在该文件夹中创建一个名为index.php:php <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>AJAX Search</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <h1>Search</h1> <form id="search-form"> <input name="search" id="term"> <input type="submit"> </form> <div id="results"></div> <script> $(function() { $("#search-form").on("submit", function(e) {e.preventDefault(); var search_term = $("#term").val(); var display_results = $("#results"); display_results.html("loading..."); var results = ''; $.post("search/search", {term: search_term}, function(data) {if (data.length == 0) {results = 'No Results'; } else { $.each(data, function() { results += this.name + ' by ' + this.author + '<br>'; }); } display_results.html(results); }); }) }); </script> </body> </html>的文件
它是如何工作的...
我们首先创建一个 RESTful 控制器，它包含两种方法:一种用于我们的主页，另一种用于处理搜索。在我们的主页上，我们有一个单独的text字段和一个submit按钮。当表单提交后，我们的 JavaScript 会将表单发布到我们的搜索页面。如果有结果，它会循环显示在我们的results分区。
对于我们的 postSearch()方法，我们使用数组作为我们的数据源。当一个搜索被发布时，我们就在数组中循环，看看这个字符串是否匹配我们的任何标题。如果是这样，该值将被添加到一个数组中，该数组将作为 JSON 返回。
使用 Ajax 创建和验证用户
当用户来到我们的应用时，我们可能希望他们注册或登录，而不需要导航到另一个页面。使用 Laravel 中的 Ajax，我们可以提交用户表单，异步运行验证。
做好准备
对于这个配方，我们需要一个有效的 Laravel 安装以及一个正确配置的 MySQL 数据库。我们还需要向数据库中添加一个用户表，这可以通过下面的代码来实现:
CREATE TABLE users (id int(10) unsigned NOT NULL AUTO_INCREMENT,email varchar(255) DEFAULT NULL,password char(60) DEFAULT NULL,PRIMARY KEY (id)) ENGINE=InnoDB DEFAULT CHARSET=utf8;
怎么做...
要完成此食谱，请遵循给出的步骤:
-
在
controllers目录中，创建一个UsersController.php文件:```php <?php class UsersController extends BaseController { public function getIndex() { return View::make('users.index'); }
public function postRegister() { $rules = array('email' => 'required|email','password' => 'required|min:6');
$validation = Validator::make(Input::all(), $rules);
if ($validation->fails()) { return Response::json($validation->errors()->toArray()); } else { DB::table('users')->insert(array('email' => Input::get('email'),'password' => Hash::make(Input::get('password')))); return Response::json(array('Registration is complete!')); } } } ```
-
在
routes.php:```php Route::controller('users', 'UsersController');
```
中注册控制器 3. 在
views目录中，创建一个名为users的文件夹，并在该文件夹中创建一个名为index.php:php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>User Register</title> <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head> <body> <form id="register"> <label for="email">Your email:</label> <input type="email" name="email" id="email"><br> <label for="password">Your password:</label> <input type="password" name="password" id="password"><br> <input type="submit"> </form> <div id="results"></div> <script> $(function(){ $("#register").on("submit", function(e) {e.preventDefault(); var results = ''; $.post('users/register', {email: $("#email").val(), password:$("#password").val()}, function(data) { $.each(data, function(){results += this + '<br>'; }); $("#results").html(results); }); }); }); </script> </body> </html>的文件
它是如何工作的...
为了开始这个食谱，我们创建我们的主页面，它将保存我们的用户登记表。当表单提交后，它将发布到我们的postRegister()方法，并将任何结果返回到results div。
postRegister()方法从为我们的验证设置规则开始。在这种情况下，我们希望确保两个字段都有值，电子邮件必须有效，密码必须至少为 6 个字符。如果验证失败，我们将错误作为 JSON 编码的字符串发送回去，并且我们的主页将显示错误。如果所有信息都有效，我们将所有信息保存到数据库，返回成功消息。
还有更多...
如果我们不希望任何其他页面向我们的方法发布数据，我们可以添加一个Request::ajax()条件。这意味着我们的方法将只处理 Ajax 调用。
基于复选框选择过滤数据
当向用户显示数据时，允许他们过滤数据会很方便。所以我们不必每次都让用户点击提交并重新加载页面，我们可以使用 Ajax 完成所有的过滤。对于这个食谱，我们将制作一个书单，并允许用户根据流派进行筛选。
做好准备
对于这个配方，我们需要一个标准的 Laravel 安装，它被配置为与数据库一起工作。我们需要通过运行以下 SQL 语句来设置要使用的表:
DROP TABLE IF EXISTS books;
CREATE TABLE books (id int(10) unsigned NOT NULL AUTO_INCREMENT,name varchar(255) DEFAULT NULL,author varchar(255) DEFAULT NULL,genre varchar(255) DEFAULT NULL,PRIMARY KEY (id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO books VALUES ('1', 'Alice in Wonderland', 'Lewis Carroll', 'fantasy');
INSERT INTO books VALUES ('2', 'Tom Sawyer', 'Mark Twain', 'comedy');
INSERT INTO books VALUES ('3', 'Gulliver\'s Travels', 'Jonathan Swift', 'fantasy');
INSERT INTO books VALUES ('4', 'The Art of War', 'Sunzi', 'philosophy');
INSERT INTO books VALUES ('5', 'Dracula', 'Bram Stoker', 'horror');
INSERT INTO books VALUES ('6', 'War and Peace', 'Leo Tolstoy', 'drama');
INSERT INTO books VALUES ('7', 'Frankenstein', 'Mary Shelley', 'horror');
INSERT INTO books VALUES ('8', 'The Importance of Being Earnest', 'Oscar Wilde', 'comedy');
INSERT INTO books VALUES ('9', 'Peter Pan', 'J. M. Barrie', 'fantasy');
怎么做...
要完成此配方，请遵循以下步骤:
-
在
controllers目录中，创建一个名为BooksController.php:```php <?php class BooksController extends BaseController { public function getIndex() { return View::make('books.index'); }
public function postBooks() { if (!$genre = Input::get('genre')) { $books = Book::all(); } else { $books = Book::whereIn('genre', $genre)->get(); } return $books; } } ```
的新文件 2. 在
routes.php文件中注册books控制器:```php Route::controller('books', 'BooksController');
```
-
在
views目录中，创建一个名为books的新文件夹，并在该文件夹中创建一个名为index.php:php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Books filter</title> <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <form id="filter"> Comedy: <input type="checkbox" name="genre[]" value="comedy"><br> Drama: <input type="checkbox" name="genre[]" value="drama"><br> Fantasy: <input type="checkbox" name="genre[]" value="fantasy"><br> Horror: <input type="checkbox" name="genre[]" value="horror"><br> Philosophy: <input type="checkbox" name="genre[]" value="philosophy"><br> </form> <hr> <h3>Results</h3> <div id="books"></div> <script> $(function(){ $("input[type=checkbox]").on('click', function() {var books = ''; $("#books").html('loading...'); $.post('books/books', $("#filter").serialize(), function(data){$.each(data, function(){books += this.name + ' by ' + this.author + ' (' + this.genre + ')<br>'; }); $("#books").html(books); }); }); }); </script> </body> </html>的文件 4. 在
models目录中，创建一个名为Book.php:php <?php class Book extends Eloquent { }的文件 5. 在浏览器中，转到
http://{my-server}/books并点击几个复选框查看结果。
它是如何工作的...
随着我们的数据库的建立，我们从我们的主列表页面开始。这一页有许多复选框，每个复选框的值对应于我们图书表中的一个流派。选中一个框，表单异步提交到我们的postBooks()方法。我们使用这些结果，循环遍历它们，并在我们的books分区中显示它们。
我们的postBooks()方法从确保一个流派被实际提交开始。如果没有，这意味着一切都没有检查，它将返回所有的书籍。如果检查了什么，我们会从数据库中获取与检查值匹配的所有内容。由于 Laravel 以 JSON 格式向我们提供了原始返回数据，因此我们随后返回结果，并且在我们的索引中，结果被正确显示。
制作一个 Ajax 简讯注册框
将用户添加到我们的电子邮件列表中的一种方法是让他们通过我们的网站注册。在这个食谱中，我们将使用 MailChimp 的应用编程接口和一个模态窗口来显示一个注册表单，并通过 Ajax 调用发送它。
做好准备
对于这个配方，我们需要一个标准的 Laravel 安装。我们还将使用 MailChimp 应用编程接口来发布时事通讯；可以在www.mailchimp.com创建一个免费账户和应用编程接口密钥。
怎么做…
要完成此配方，请遵循给定的步骤:
-
打开
composer.json文件，更新require部分，类似以下代码:php "require": { "laravel/framework": "4.0.*", "rezzza/mailchimp": "dev-master" } -
在 artisan 文件所在的命令行窗口中，使用以下命令更新 Composer:
```php php composer.phar update
```
-
在
app/config目录中，创建一个名为mailchimp.php:```php <?php
return array('key' => '12345abcde-us1','list' => '123456789' ); ```
的文件 4. 在
views目录下，创建一个名为signup.php的文件:php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Newsletter Signup</title> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script> </head> <body> <p> <a href="#signupModal" role="button" class="btn btn-info" data-toggle="modal">Newsletter Signup</a> </p> <div id="results"></div> <div id="signupModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Sign-up for our awesome newsletter!</h3> </div> <div class="modal-body"> <p> <form id="newsletter_form"> <label>Your First Name</label> <input name="fname"><br> <label>Last Name</label> <input name="lname"><br> <label>Email</label> <input name="email"> </form> </p> </div> <div class="modal-footer"> <a href="#" class="btn close" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary" id="newsletter_submit">Signup</a> </div> </div> <script> $(function(){ $("#newsletter_submit").on('click', function(e){e.preventDefault(); $("#results").html("loading..."); $.post('signup-submit', $("#newsletter_form").serialize(), function(data){ $('#signupModal').modal('hide'); $("#results").html(data); }); }); }); </script> </body> </html> -
在
routes.php文件中，添加我们需要的路线，代码如下:```php Route::get('signup', function() { return View::make('signup'); });
Route::post('signup-submit', function() { $mc = new MCAPI(Config::get('mailchimp.key'));
$response = $mc->listSubscribe('{list_id}',Input::get('email'),array('FNAME' => Input::get('fname'),'LNAME' => Input::get('lname') ) );
if ($mc->errorCode){ return 'There was an error: ' . $mc->errorMessage; } else { return 'You have been subscribed!'; } }); ```
它是如何工作的...
我们首先使用 MailChimp SDK 的编写器版本将 MailChimp 包安装到我们的应用中。然后，我们需要创建一个配置文件来保存我们的应用编程接口密钥和我们想要使用的列表标识。
我们的注册页面将利用 jQuery 和 Bootstrap 进行处理和显示。因为我们只希望在用户想要注册时显示表单，所以我们有一个按钮，当点击它时，会显示一个带有表单的模态窗口。表格将显示名字、姓氏和电子邮件地址。
当提交注册表单时，我们序列化数据并将其发送到我们的signup-submit路线。一旦得到响应，我们就隐藏模态，并在页面上显示结果。
在我们的signup-submit路线中，我们尝试用输入的信息订阅用户。如果我们得到响应，我们检查响应是否包含错误。如果有错误，我们会向用户显示，如果没有，我们会显示我们的成功消息。
还有更多...
我们的signup-submit路线不对表单输入进行任何验证。要包括这一点，请看中的一个例子，使用 Ajax 创建和验证用户。
另见
- 使用 Ajax 方法创建和验证用户
使用 Laravel 和 jQuery 发送电子邮件
创建联系人表单时，我们可以选择让用户异步发送表单。使用 Laravel 和 jQuery，我们可以提交表单，而不需要用户转到不同的页面。
做好准备
对于这个食谱，我们需要一个标准的 Laravel 安装和我们的邮件客户端正确配置。我们可以在app/config/mail.php文件中更新我们的邮件配置。
怎么做...
要完成此配方，请遵循给定的步骤:
-
在
views目录下，创建一个名为emailform.php的文件，如下代码所示:php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body> <div id="container"> <div id="error"></div> <form id="email-form"> <label>To: </label> <input name="to" type="email"><br> <label>From: </label> <input name="from" type="email"><br> <label>Subject: </label> <input name="subject"><br> <label>Message:</label><br> <textarea name="message"></textarea><br> <input type="submit" value="Send"> </form> </div> <script> $(function(){ $("#email-form").on('submit', function(e){e.preventDefault(); $.post('email-send', $(this).serialize(), function(data){ if (data == 0) { $("#error").html('<h3>There was an error</h3>'); } else { if (isNaN(data)) { $("#error").html('<h3>' + data + '</h3>'); } else { $("#container").html('Your email has been sent!'); } } }); }); }); </script> </body> </html> -
在
views文件夹中，创建名为ajaxemail.php的电子邮件模板视图文件，代码如下:php <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="utf-8"> </head> <body> <h2>Your Message:</h2> <div><?= $message ?></div> </body> </html> -
在
routes.php文件中，创建如下代码片段所示的路线:```php Route::get('email-form', function() { return View::make('emailform'); }); Route::post('email-send', function() { $input = Input::all();
$rules = array('to' => 'required|email','from' => 'required|email','subject' => 'required','message' => 'required' );
$validation = Validator::make($input, $rules);
if ($validation->fails()) { $return = ''; foreach ($validation->errors()->all() as $err) { $return .= $err . '
'; } return $return; }$send = Mail::send('ajaxemail', array('message' =>Input::get('message')), function($message) { $message->to(Input::get('to'))->replyTo(Input::get('from'))->subject(Input::get('subject')); });
return $send; }); ```
它是如何工作的...
对于这个配方，我们需要正确配置我们的电子邮件客户端。我们有很多选择，包括 PHP 的mail()方法、sendmail 和 SMTP。我们甚至可以使用第三方电子邮件服务，如 mailgun 或邮戳。
我们的电子邮件表单是一个普通的 HTML 表单，包含四个字段:to和from电子邮件地址、subject行和实际的电子邮件。提交表单后，字段将被序列化并发布到我们的email-send路线。
email-send路线首先验证所有发布的输入。如果有任何验证错误，它们将作为字符串返回。如果一切正常，我们将我们的值发送到Mail::send方法，然后发送它。
回到我们的e-mail-form路由 JavaScript，我们检查email-send是否返回了FALSE，如果是，我们显示一个错误。如果不是，我们需要检查响应是否是数字。如果它不是一个数字，这意味着有验证错误，我们显示它们。如果是数字，则表示电子邮件发送成功，因此我们显示成功消息。
使用 jQuery 和 Laravel 创建可排序的表
当处理大量数据时，在表视图中显示数据会很有帮助。为了操作数据，例如排序或搜索，我们可以使用数据表 JavaScript 库。这样，我们就不需要每次想要更改视图时都不断地调用数据库。
做好准备
对于这个配方，我们需要标准安装的 Laravel 和正确配置的 MySQL 数据库。
怎么做...
按照给定的步骤完成该配方:
-
在我们的数据库中，创建一个新表，并使用以下命令添加一些示例数据:
php DROP TABLE IF EXISTS bookprices; CREATE TABLE bookprices (id int(10) unsigned NOT NULL AUTO_INCREMENT,price float(10,2) DEFAULT NULL,book varchar(100) DEFAULT NULL,PRIMARY KEY (id)) ENGINE=InnoDB DEFAULT CHARSET=utf8; INSERT INTO bookprices VALUES ('1', '14.99', 'Alice in Wonderland'); INSERT INTO bookprices VALUES ('2', '24.50', 'Frankenstein'); INSERT INTO bookprices VALUES ('3', '29.80', 'War andPeace'); INSERT INTO bookprices VALUES ('4', '11.08', 'Moby Dick'); INSERT INTO bookprices VALUES ('5', '19.72', 'The Wizard of Oz'); INSERT INTO bookprices VALUES ('6', '45.00', 'The Odyssey'); -
在
app/models目录中，用以下代码片段创建一个名为Bookprices.php的文件:php <?php class Bookprices extends Eloquent { } -
在
routes.php文件中，按照下面的代码添加我们的路线:php Route::get('table', function() { $bookprices = Bookprices::all(); return View::make('table')->with('bookprices', $bookprices); }); -
在
views目录下，创建一个名为table.php的文件，代码如下:php <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> <link rel="stylesheet" type="text/css" href="//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> </head> <body> <h1>Book List</h1> <table> <thead> <tr> <th>Price</th> <th>Name</th> </tr> </thead> <tbody> <?php foreach ($bookprices as $book): ?> <tr> <td><?php echo $book['price'] ?></td> <td><?php echo $book['book'] ?></td> </tr> <?php endforeach; ?> </tbody> </table> <script> $(function(){ $("table").dataTable(); }); </script> </body> </html>
它是如何工作的...
为了开始这个食谱，我们创建了一个表来保存我们的账面价格数据。然后我们将数据插入表中。接下来，我们创建一个Eloquent模型，这样我们就可以与数据进行交互。然后我们将这些数据传递到我们的视图中。
在我们看来，我们加载了 jQuery 和dataTables插件。然后，我们创建一个表来保存数据，然后遍历数据，将每条记录放入一个新行。当我们将dataTable插件添加到我们的表中时，它会自动为我们的表中的每一列添加排序。
还有更多...
Datatables 是一个强大的 jQuery 插件，用于操作表格数据。欲了解更多信息，请查看位于http://www.datatables.net的文档。
版权属于：月萌API www.moonapi.com，转载请注明出处
