jquery datatables各引數詳細說明及簡單應用
v1.9.0下載後，將media資料夾裡面的css，images，js資料夾拷貝到你的網站即可。接下來引入以下內容：
<style type="text/css" title="currentStyle">
@import "./style/datatable/css/demo_page.css";
@import "./style/datatable/css/demo_table.css";
</style>
<script type="text/javascript" src="./style/datatable/js/jquery.js"></script> $(document).ready(function() {
$('#example').dataTable();
} );
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示資料數量
"bFilter": true, //過濾功能
"bSort": true, //排序功能
"bInfo": true,//頁尾資訊
"bAutoWidth": true 說明：以上引數配置實現的顯示效果和第一個是一樣的。
- 預設排序設定，
aaSorting
http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html
"aaSorting": [[ 4, "desc" ]],//設定第5個元素為預設排序
說明：
將表單id改為class：
初始化：
$('.example').dataTable(
即可。
- 隱藏部分列的內容，
aoColumnDefs
http://www.datatables.net/release-datatables/examples/basic_init/hidden_columns.html
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },//bSearchable：是否可搜尋；bVisible：是否可見；aTargets：哪一列
{ "bVisible": false, "aTargets": [ 3 ] }//
]
"sDom": '<"top"i>rt<"bottom"flp><"clear">'
表示的html為：
<div class="top">這裡顯示 當前條數，總共條數</div>
這裡顯示 請求中的提示資訊，表單內容
<div class="bottom">這裡顯示 搜尋框，每頁數量選擇，翻頁按鈕</div>
<div class="clear"></div>
//l - 每頁數量選擇select
//f – 搜尋框search
//t – 表單內容table
//i – 當前條數，總共條數information
//p – 翻頁按鈕pagination
//r – 請求中的提示資訊
//< 和 > – 一個div的開始與結束
//<"class"> – class為div的class名稱
- 儲存當前頁面資訊為
cookie，預設關閉
http://www.datatables.net/release-datatables/examples/basic_init/state_save.html
"bStateSave": true
如果使用者關閉頁面後重新開啟該頁面，該列表會和關閉前的狀態完全一樣（長度，過濾，分頁和排序）
"sPaginationType": "full_numbers"
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
用的很少
"sScrollY": "200px",
"bPaginate": false //該引數為是否顯示分頁，如果設定為true貌似就沒什麼意義了
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%"
需要拷貝examples/examples_support/themes資料夾到style/datatable裡面
@import "./style/datatable/css/demo_table.css";
替換為：
@import "./style/datatable/css/demo_table_jui.css";
主題一：
引入
@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";
主題二：
引入
@import "./style/datatable/themes/ui-lightness/jquery-ui-1.8.4.custom.css";
主題二是橘色系的，木有第一個smoothness好看，這裡就不截圖了！
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_條",
"sZeroRecords": "沒有找到符合條件的資料",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "當前第 _START_ - _END_ 條 共計 _TOTAL_ 條",
"sInfoEmpty": "木有記錄",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sSearch": "搜尋：",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "後一頁",
"sLast": "尾頁"
}
}
也可以直接指定語言包，txt檔案：
"sUrl": "media/language/de_DE.txt" //檔案格式和上面一樣
最前面加入：
var asInitVals = new Array();
$('#example').dataTable 修改為：var oTable =$('#example').dataTable
加入：
/*過濾程式碼開始*/
$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
tfoot裡面加入：
<tr>
<th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th>
<th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th>
<th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th>
<th><input type="text" name="search_version" value="Search versions" class="search_init" /></th>
<th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th>
</tr>
在最前面引入函式：
/* 構造每一行詳情的函式 fnFormatDetails*/
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在這裡定義要返回的內容
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
ready(function)裡面開頭加入：
/*顯示每一行詳情用_start*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*顯示每一行詳情用_end*/
ready(function)裡面末尾加入：
/*加入展開，收縮每一行詳情按鈕用*/
$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if ( oTable.fnIsOpen(nTr) )
{
this.src = "./style/datatable/images/details_open.png";
oTable.fnClose( nTr );
}
else
{
this.src = "./style/datatable/images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
值得注意的是，如果加入了tfoot，必須手動在裡面加入多一行th！
最後，是寒風寫的簡單的php+mysql+datatables的簡單示例，很多寒風都做了詳細的註釋說明：
<?php
$mysqli=new mysqli("localhost","root","","database");
$mysqli->query("SET NAMES utf8");
$result=$mysqli->query("SELECT * FROM `table` limit 500");
if(!$result){
echo "查詢出錯！";
exit;
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" title="currentStyle">
@import "./style/datatable/css/demo_page.css";
@import "./style/datatable/css/demo_table_jui.css";
@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";
body{ font-size:12px;}
table{ font-size:12px;}
</style>
<script type="text/javascript" src="./style/datatable/js/jquery.js"></script>
<script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
/* 構造每一行詳情的函式 fnFormatDetails*/
function fnFormatDetails ( oTable, nTr ){
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在這裡定義要返回的內容
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
/*頁面元素載入完成後開始執行*/
$(document).ready(function() {
/*顯示每一行詳情用_start*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
/*顯示每一行詳情用_end*/
var asInitVals = new Array(); //用於每一列搜尋過濾
var oTable =$('#example').dataTable( //var oTable用於每一列搜尋過濾
{
/*基本引數設定，以下引數設定和預設效果一致*/
"bPaginate": true, //翻頁功能
"bLengthChange": true, //改變每頁顯示資料數量
"bFilter": true, //過濾功能
"bSort": true, //排序功能
"bInfo": true,//頁尾資訊
"bAutoWidth": true,//自動寬度
/*預設排序設定*/
"aaSorting": [[ 4, "desc" ]],//設定第5個元素為預設排序
/*預設翻頁樣式設定*/
"sPaginationType": "full_numbers",
/*是否開啟主題*/
"bJQueryUI": true,
/*語言設定*/
"oLanguage": {
"sLengthMenu": "每頁顯示 _MENU_條",
"sZeroRecords": "沒有找到符合條件的資料",
"sProcessing": "<img src=’./loading.gif’ />",
"sInfo": "當前第 _START_ - _END_ 條 共計 _TOTAL_ 條",
"sInfoEmpty": "木有記錄",
"sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
"sSearch": "搜尋：",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "後一頁",
"sLast": "尾頁"
}
}
}
);
/*每一列搜尋過濾程式碼開始*/
$("tfoot input").keyup( function () {
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );
$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$
相關推薦
jquery datatables各引數詳細說明及簡單應用
v1.9.0下載後，將media資料夾裡面的css，images，js資料夾拷貝到你的網站即可。接下來引入以下內容：
<style type="text/css" title="currentStyle">
@import "./style/datatable/css/de
[轉]mysqldump 匯出資料庫各引數詳細說明
mysqldump 匯出資料庫各引數詳細說明
mysqldump是mysql用於轉儲存資料庫的實用程式。
它主要產生一個SQL指令碼，其中包含從頭重新建立資料庫所必需的命令CREATE TABLE INSERT等。
下面我們詳細介紹一下mysqldump匯出的各種例項：
Echarts(二、柱狀圖（各引數詳細描述）)
1.jsp頁面
<body>
<div class="menutab">
<ul>
<li id="zldb">質量等別監測預警</li&g
Echarts——柱狀圖（各引數詳細描述）
var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('item'));
let option = {
FFT學習及簡單應用（一點點詳細）
傅裏葉變換 一次 表示 解法 image ret clas 詳細 關系 什麽是FFT
既然打開了這篇博客，大家肯定都已經對FFT(Fast Fourier Transformation)有一點點了解了吧
FFT即為快速傅裏葉變換，可以快速求卷積（當然不止這一些應用，但是我
01 . Linux自動化Shell詳細入門介紹及簡單應用
#### Shell簡介
> Shell 是一個 C 語言編寫的指令碼語言，它是使用者與 Linux 的橋樑，使用者輸入命令交給 Shell 解釋處理Shell 將相應的操作傳遞給核心（Kernel），核心把處理的結果輸出顯示到螢幕給使用者.
##### Shell分為兩類
`圖形介面 Shel
SpringMVC配置及簡單應用
新的 bat pan start rop jstl cast 版本 ans 1.在web.xml中配置前端控制器
<servlet>
<servlet-name>springmvc</servlet-name>
<servl
達內科技NTD1712華為vlan定義，及簡單應用
system blog interface config ethernet 地址 col tag efault Vlan的定義：是物理設備上連接的不受物理限制的用戶的一個邏輯組。
Vlan的作用：交換機可以分割沖突域，但不能分割廣播域，為了解決這個問題，
Tesseract 在 windows 下的安裝及簡單應用
打開 版本信息 文本 否則 選擇 分享 16px alt 運行 Tesseract 是一個開源的 OCR 引擎，可以識別多種格式的圖像文件並將其轉換成文本，最初由 HP 公司開發，後來由 Google 維護。下載地址：https://digi.bib.uni-mannhei
ETCD叢集安裝配置及簡單應用
環境配置
CentOS Linux release 7.3.1611 (Core)
etcd-v3.2.6
192.168.108.128 節點1
192.168.108.129 節點2
192.168.108.130 節點3
ETCD
Eureka概念及簡單應用
1、為什麼使用Eureka？
在Spring Cloud中我們經常使用Eureka，是因為SpringCloud對Eureka支援力度非常大 ，Eureka的社群活躍多較高，版本更新的速度快。
Eureka簡介：
Eureka是Netflix開發的服務發現元件，
使用python操作redis及簡單應用
redis 連線例項是執行緒安全的，可以直接將redis連線例項設定為一個全域性變數，直接使用.
pip install redis
import redis
>> r = redis.Redis(host='localhost',port=6379,password='', db=0
串：串的基本定義及簡單應用魔王語言
串
串，於我的理解就是字串 一般認為有三種儲存方式：定長順序串，堆串，塊鏈串（個人認為比較雞肋）。定長順序串類似於普通字串，同陣列的大小一樣最長長度固定。堆串儲存在堆中，空間大小可重新分配。塊鏈串類似於連結串列，是極端節省空間的堆串。 定長順序串與堆串應用較多,定長順序串的一些操作存
Weka安裝及簡單應用
因為前段時間上課有接觸WEKA這個軟體 ，寫了一個實驗報告，特此把它貼出來，希望能對大家有所幫助~
一、Weka介紹
1、Weka簡介
Weka是懷卡託智慧分析環境(Waikato Environment for Knowledge Analysis)的英文字首縮寫，在
vs 2017新增Report Viewer控制元件及簡單應用
安裝完vs2017之後我們進行新增Report Viewer控制元件：
1. 點選Tools -> Extensions and Updates...
2. 在新視窗搜尋欄中輸入rdlc後
【Spring訊息】RabbitMq安裝及簡單應用（二）
前言：
埋頭苦寫。先把官方文件翻譯過來。整個流程跑一遍。上一篇文章，【Spring訊息】RabbitMq安裝及簡單應用（一），把點對點發送訊息寫完了。之前雖然也可以一個生產者多個消費者，但是一條訊息只能被一個消費者處理，所以是點對點。這篇文章來講講釋出訂閱，一對多。一條訊息
深度學習介紹及簡單應用
引言
深度學習背後的主要原理是從大腦中汲取靈感。，這種觀點產生了“神經網路”術語，大腦包含數十億個神經元，它們之間有數萬個連線。 在許多情況下，深度學習演算法類似於大腦，因為大腦和深度學習模型都涉及大量的計算單元（神經元），這些單元在未啟用時並不是活躍的，它們彼此互動時會變得智慧化。
神經元
神經網路
【舊文章搬運】ZwQuerySystemInformation枚舉內核模塊及簡單應用
接下來 smo and obj 基址 add dwr 調用 mit 原文發表於百度空間，2008-10-24==========================================================================
簡單說，即調用
POI入門及簡單應用
由於工作的需要，學習了一下POI， Apache POI是Apache軟體基金會的開放原始碼函式庫，POI提供API給Java程式對Microsoft Office格式檔案讀和寫的功能。
那麼我們怎麼使用POI呢？POI的使用其實非常簡單，
人工智慧學習筆記-Theano介紹及簡單應用
1 Theano介紹和安裝
1.1 什麼是Theano
Theano是一個較為老牌和穩定的機器學習python庫之一。Theano基於Python擅長處理多維陣列（緊密集成了Numpy），屬於比較底層的框架，theano起初也是為了深