首頁 > 開發者 > 網站開發

dataTable的使用,接受json資料顯示在頁面上

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：search   title   第一個   doc   搜尋   insert   html4   link   asc   

<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/easyui/jquery.dataTables.css">

<!-- jQuery -->
<script type="text/javascript" charset="utf8"
src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyui/bootstrap.min.js"></script>

<link rel="stylesheet" href="${pageContext.request.contextPath}/easyui/bootstrap.min.css">
<!-- DataTables -->
<script type="text/javascript" charset="utf8"
src="${pageContext.request.contextPath}/easyui/jquery.dataTables.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">

var data = [{username:"zhangsan",password:"123"},
{username:"lisi",password:"456"},
{username:"wangwu",password:"789"},
{username:"zhaosi",password:"012"}
];

$(document).ready(function() {

$(‘#tab1‘).dataTable({
"sScrollX": "100%", //表格的寬度
"sScrollXInner": "110%", //表格的內容寬度
"bScrollCollapse": true, //當顯示的資料不足以支撐表格的預設的高度時，依然顯示縱向的捲軸。(預設是false)
"bPaginate": true, //是否顯示分頁
"bLengthChange": true, //每頁顯示的記錄數
"bFilter": true, //搜尋欄
"bSort": true, //是否支援排序功能
"bInfo": true, //顯示表格資訊
"bAutoWidth": false, //自適應寬度
"aaSorting": [[1, "asc"]], //給列表排序 ，第一個參數表示數組 (由0開始)。1 表示Browser列。第二個參數為 desc或是asc
/* "aoColumns": [
{data:‘username‘},
{data:‘password‘}

], //列設定，表有幾列，數組就有幾項*/
"data":data,
"columns":[
{data:‘username‘},
{data:‘password‘}
],
"bStateSave": true, //儲存狀態到cookie *************** 很重要 ， 當搜尋的時候頁面一重新整理會導致搜尋的消失。使用這個屬性就可避免了
"sPaginationType": "full_numbers", //分頁，一共兩種樣式，full_numbers和two_button(預設)
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "對不起，查詢不到任何相關資料",
"sInfo": "當前顯示 _START_ 到 _END_ 條，共 _TOTAL_ 條記錄",
"sInfoEmtpy": "找不到相關資料",
"sInfoFiltered": "資料表中共為 _MAX_ 條記錄)",
"sProcessing": "正在載入中...",
"sSearch": "搜尋",
"sUrl": "", //多語言設定檔，可將oLanguage的設定放在一個txt檔案中，例：Javascript/datatable/dtCH.txt
"oPaginate": {
"sFirst": "第一頁",
"sPrevious": " 上一頁 ",
"sNext": " 下一頁 ",
"sLast": " 最後一頁 "
}
}, //多語言配置
"bJQueryUI": false, //可以添加 jqury的ui theme 需要添加css
"aLengthMenu": [[3, 25, 50, -1, 0], ["每頁3條", "每頁25條", "每頁50條", "顯示所有資料", "不顯示資料"]] //設定每頁顯示記錄的下拉式功能表
});


});
</script>
<body>
<table id="tab1" class="text-center">
<thead>
<tr>
<th>使用者名稱</th>
<th>密碼</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>

dataTable的使用,接受json資料顯示在頁面上

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More