jquery datatable 粗犷
需要学习：
HTML、CSS、Javascript
Bootstrap： 基于以上三个的一个框架
jQuery：一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程
Ajax：asynchronous javascript and xml：异步Javascript和xml
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有
元素
$("p.test").hide() - 隐藏所有 class="test" 的
元素
$("#test").hide() - 隐藏 id="test" 的元素
jQuery 入口函数:
$(document).ready(function(){
// 执行代码
});
或者
$(function(){
// 执行代码
});
JavaScript 入口函数:
window.onload = function () {
// 执行代码
}
jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
Ajax
asynchronous javascript and xml：异步Javascript和xml
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
CSS
JQuery选择器
$('.sel_u option[selected="selected"]').css('color','red')
$('.sel_u option:selected').css('color','red')
JQuery
jquery跟 javascript或html的语法是不一样的。所以，用什么就查什么
可以做什么？
1、可以筛选页面中的所有元素，对其进行各种想做的操作，特别神奇。所看到的任何东西都可以改变其形态。
通过选择器选择出信息后，再通过遍历得到想要的处理效果。
$(function(){
})
等价于
$(document).ready(function(){
})
选择器
select操作
$("#selected_id").change(function(){ }) //为Select添加事件，当选择其中一项时触发
// 获取选择的text与value
. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的 这个是所有多个text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值
//设置select选择的Text与Value
$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中
//添加与删除select的optoion项
1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Optiona
6. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Optiona
内容清空：$("#charCity").empty();
1、设置value为pxx的项选中
$(".selector").val("pxx");
2、设置text为pxx的项选中
$(".selector").find("option[text='pxx']").attr("selected",true);
遍历
$.each()
$.each(object,function(index,e){ ... });
object --> 需要遍历的对象或数组
index --> 索引
e --> 循环的每个元素
例子：
<!DOCTYPE html>
<html>
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
<script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></script>
<script type="text/javascript">
$(function(){
var lis = $("#ul li");
console.debug("方式①：使用普通for循环 ");
for(var i=0;i<lis.length;i++){
var li = lis[i];
var value = $(li).html();
console.debug(value);
}
console.debug("方式②：使用jquery方式循环");
$.each(lis,function(index,obj){ //index:索引obj:循环的每个元素
var value = $(obj).html();
console.debug(value);
});
console.debug("方式②：使用jquery方式循环");
lis.each(function(index,obj){
var value = $(obj).html();
console.debug(value);
});
});
</script>
Datatables
datatables.club ：中文学习网站
datatable 是JQuery的一个插件
一个基于jQuery的表格插件，可以把一个简单的html表格变得功能强大，搜索或翻页；
1、引入 CSS 样式
2、引入 JS 核心库
3、写上初始化代码
在页面中即可看到强大的表格
在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DT的核心js文件和一个DT的css文件
从 datatables的 入门手册 看起，第一步 安装，有个本地模板，之后再进行下一步操作
DOM
网页：HTML与XML的文档编程接口；
list
filter
table
inf
page
JSON
Javascript object notation：一种轻量级的数据交换格式。
一个序列化的对象或数组
1、六个构造字符
[] {} : ,
值： 可以是对象、数组、数字、字符串或三个字面值(true/false/null)
对象： {"name": "John Doe", "age": 18, "address": {"country" : "china", "zip-code": "10000"}}
一些合法的JSON的实例：
{"a": 1, "b": [1, 2, 3]}
[1, 2, "3", {"a": 4}]
3.14
"plain_text"
Data 视频教程
四节 处理模式
客户端处理 (client)
服务器端处理 (ServerSide)
五节 数据源类型 (Data Source Types)
数组 (Arrays[])
对象 (objects{})
实例 (new myclass())
六节：数据源选择
DOM：适合简单报表，字段不多变，复杂表头
HTML5： data-* data-search/data-filter;data-order/data-sort
JavaScript： 数组、对象、实例皆可
Ajax
七节：正交数据
一个单元格数据的四个不同维度：
display
sort
filter
type
数据提供方式：
预定义值：后台格式可以用； HTML5 data-*属性
格式原始格式；
$(document).ready(function () {
$('#example').DataTable({
ajax:"http://localhost:8080/api/objects/format",
columns:[
{data:"name"},
{data:"position"},
{data:"office"},
{data:"age"},
{
data:"start_date",
render:{
_:"display",
sort:"timestamp"
}
},
{data:"salary"}
]
});
});
八节：render
渲染：把原始数据进行一些列的处理或是格式化的操作；
处理方式：
1、函数：实现复杂的逻辑，用来显示最终数据；
2、字符串
小技巧：
添加一个前缀
格式化时间
字符串的拼接
多个列合并显示
在最后一列追加按钮、添加、修改、删除
九节：ajax
Ajax获取数据，注意两点：
1、需要确认 数据源是否包含表格需要数据；
2、需要确认 每一行数据是否包含每个列要显示数据；
十节：option
1、常用的配置属性；
2、使用默认配置属性简化代码，利用代码
$.extend($.dataTable.default,{
searching:false,
ordering:false
});
3、扩展功能； extentions
得确保引用了相应的CSS文件,js文件；
$('#mytable').DataTable({
select:true
})
十一节：API
组成：
Tables操作表格
Columns操作列
Rows操作行
Cells操作单元格
Core核心方法
Utilities工具方法
访问API，获取api实例
- $( selector ).DataTable(); D返回的是api实例
- $( selector ).dataTable().api(); d：小d获取的是jquery
- new $.fn.dataTable.Api( selector );
chaining：链式调用
多个表：一个实例绑定了多个表格
复数、单数： rows.data(); row().data()
示例：列过滤
十二节：styling 样式
目的：使Datatables插件在项目中达到统一样式
介绍了Datatables的默认样式，提供了对列、单元格、压缩、排序列、鼠标经过等处理；
默认样式；
流行的CSS框架： bootstrap4 foundation jQuery UI
十三节：event 事件
事件是什么？
内部进行通知 达到协同目的；对其相依赖的元素进行操作
监听事件
api实例，直接写事件名称；
jquery，需要在事件的后面追加统一的命名空间 .dt;
移除事件
off; one() 一次性事件处理;
事件冒泡
document是一个树形结构，所以子元素的事件会被父级捕获到，可以在父级上委托监听事件
通过监听事件完成项目中的其他特殊需求；
插件与插件之间如何协同工作；
最新文章
- Canvas的width,height 和 样式中Canvas的width,height
- Xilinx的约束文件
- CYQ.Data 数据框架 使用篇一 入门指南
- 常用sql语句整理[SQL Server]
- ibernate学习笔记5---实体类或属性名与数据库关键字冲突、hql命名参数、hql实现通用分页
- IntelliJ IDEA 中集成使用git（2015年06月10日）
- [NOIP1999]拦截导弹
- VS2015 C#6.0
- 【翻译】C#和.NET核心快速参考
- MySQL编程(0) - Mysql中文乱码问题解决方案
- Linux_服务器_07_ 将用户设置为管理员
- 使用kprobes查看内核内部信息
- 在图像中随机更改像素值程序——matlab
- Golang入门教程（十）内建函数
- Meet Hadoop
- moment.js 常用（几天前、相差几天、自然周、自然月）
- linux sed文本
- Java原理之HashMap
- P1414 又是毕业季II
- Leetcode 二分查找 Search Insert Position