jquery datatable 粗犷

2023-12-04 14:03:00

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

通过监听事件完成项目中的其他特殊需求；
插件与插件之间如何协同工作；

码农公寓