jquerydatatable粗犷

需要学习：

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("Text"); //为Select追加一个Option(下拉项)

2. $("#select_id").prepend("请选择"); //为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 --> 循环的每个元素


例子：

• 1


• 2


• 3


• 4

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是一个树形结构，所以子元素的事件会被父级捕获到，可以在父级上委托监听事件

通过监听事件完成项目中的其他特殊需求；

插件与插件之间如何协同工作；