Ajax data source of DataTables in Asp.net
(DataTables example - Ajax data source in Asp.net) – Ngoài việc đọc và hiển thị các dữ liệu trong MySQL, SQL Server thì DataTables còn có khả năng đọc dữ liệu từ hầu hết các nguồn dữ liệu JSON bằng Ajax. Dữ liệu để hiển thị sẽ là danh sách các mảng dữ liệu bao gồm các hàng và các cột được lưu giữ trên các file kể cả file TEXT.
Để biết thêm chi tiết về cách tải dữ liệu từ file TEXt bằng Ajax, xin vui lòng tham khảo bài viết dưới đây.
- B4: Tạo Project trong Microsoft Visual Studio 2010
Để biết thêm chi tiết về cách tải dữ liệu từ file TEXt bằng Ajax, xin vui lòng tham khảo bài viết dưới đây.
- B1: Tạo file Data có tên Products.txt và đặt trong thư mục
Data của Project
- B2: File Data có cấu trúc
{
"data": [
{
"Tên trường 1": "Giá trị trường 1",
"Tên trường 2": "Giá trị trường 2",
"Tên
trường n": "Giá trị trường n"
}
]
}
- B3: Nhập dữ liệu cho file Products.txt
{
"data":
[
{
"ProductID":
"1",
"ProductName":
"Chai",
"SupplierID":
"1",
"QuantityPerUnit":
"10 boxes x 20 bags",
"UnitPrice":
"18.0000",
"UnitsInStock":
"39",
"UnitsOnOrder":
"0",
"ReorderLevel":
"10",
"Discontinued":
"False"
},
{
"ProductID":
"2",
"ProductName":
"Chang",
"SupplierID":
"1",
"QuantityPerUnit":
"24 - 12 oz bottles",
"UnitPrice":
"19.0000",
"UnitsInStock":
"17",
"UnitsOnOrder":
"40",
"ReorderLevel":
"25",
"Discontinued":
"False"
},
{
"ProductID":
"3",
"ProductName":
"Aniseed Syrup",
"SupplierID":
"1",
"QuantityPerUnit":
"12 - 550 ml bottles",
"UnitPrice":
"10.0000",
"UnitsInStock":
"13",
"UnitsOnOrder":
"70",
"ReorderLevel":
"25",
"Discontinued":
"False"
}
]
}
<head id="Head1" runat="server">
<title>Scrolling and Bootstrap Tabs of DataTables in Asp.net</title>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
<%@ Page
Title="Ajax data
source of DataTables in Asp.net" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DisplayingTotalinFooterofDataTables._Default"
%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<div class="panel
panel-default">
<div class="panel-heading">
<h3>Ajax data source of DataTables in Asp.net</h3>
</div>
<div class="panel-body">
<table id="tblData"
class="table
table-striped table-bordered" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th align="center">ProductName</th>
<th align="center">QuantityPerUnit</th>
<th align="center">UnitPrice</th>
<th align="center">UnitsInStock</th>
<th align="center">UnitsOnOrder</th>
<th align="center">ReorderLevel</th>
</tr>
</thead>
</table>
</div>
</div>
<script type="text/javascript">
function pageLoad() {
$('#tblData').DataTable({
"ajax": "data/Products.txt",
"columns": [
{ "data":
"ProductName" },
{ "data":
"QuantityPerUnit" },
{ "data":
"UnitPrice" },
{ "data":
"UnitsInStock" },
{ "data": "UnitsOnOrder" },
{ "data":
"ReorderLevel" }
]
});
};
</script>
</asp:Content>Chúc các bạn thành công!
Quang Bình
Share This:
No Comment to " Ajax data source of DataTables in Asp.net "