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

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

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