DataTable添加checkbox实现表格数据全选,单选(点选)
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 ( MIT license )! 商业支持
更多特性请到官网查看
http://www.datatables.club/
下面是使用dt构建数据源和绑定
1.构建datatable数据源
table = $('#hjInfoTable').DataTable({ //构造函数
"data": data,//数据源--参过datatable.js说明文档data,data传入就行
"columns": [
{ "title": "<input align=\"center\" type=\"checkbox\" class=\"checkAll\" checked=\"checked\" id=\"checkAll\"/>" },
{ "title": "工程编号s" },
{ "title": "用户号" },
{ "title": "户名" },
{ "title": "地址" },
],
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条",
"sProcessing": "<img src='" + imgUrl + "'/><span> Loading...</span>",
"sInfo": "从 _START_ 到 _END_, 共 _TOTAL_ 条记录",
"sInfoEmpty": "",
"sGroupActions": "_TOTAL_ records selected: ",
"sAjaxRequestGeneralError": "未能连接服务器,请重试!",
"sEmptyTable": "未找到相关记录",
"sZeroRecords": "共 0 条记录",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sPrevious": "上一页",
"sNext": "下一页",
"sPage": "页",
"sPageOf": "of"
},
"sSearch": "搜索",
},
"bFilter": false, //搜索栏
"fnInitComplete": function (oSettings, json) { //datatables初始化完毕后回调方法
.......里面可加回调事件
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).css("cursor", "pointer");
},
"aoColumnDefs": [{
"render": function (data, type) {
return "<div align='center'><input type=\"checkbox\" checked=\"checked\" name=\"ckb-jobid\" value=" + data + "></div>";
}, "aTargets": 0 //第一列
}, { //隐藏业务类型列
"targets": [5],
"visible": false
},
{ //隐藏划价人列
"targets": [6],
"visible": false
}
{ //隐藏用户站点列
"targets": [11],
"visible": false
}, ],
});
}
1.全选或者全部不选
//使用live绑定数据,因为checkAll还没有加载好
$("#checkAll").die().live("click", function () {
if (this.checked) {
$(this).attr('checked', 'checked')
$("input[name='ckb-jobid']").each(function () {
this.checked = true;
});
} else {
$(this).removeAttr('checked')
$("input[name='ckb-jobid']").each(function () {
this.checked = false;
});
}
});
2.点击单个按钮
$("input[name='ckb-jobid']").die().live("click", function () {
if ($(this).is(":checked") == false) {
$("#checkAll").prop("checked", false);
} else {
var flag = true;
$("#checkAll").prop("checked", true);
$("input[name='ckb-jobid']").each(function () {
if (this.checked == false) {
$("#checkAll").prop("checked", false);
flag = false;
return;
}
});
}
});



(转载https://blog.csdn.net/younghaiqing/article/details/83010449)
DataTable添加checkbox实现表格数据全选,单选(点选)的更多相关文章
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- html 和 html5(一)(表格 | 列表 | 提交按钮 | 单选 |复选 | 框架 | 脚本 | html字符实体 )
一.框架 使用iframe来显示目录链接页面 iframe可以显示一个目标链接的页面 目标链接的属性必须使用iframe的属性,如下实例: 实例 <iframe src="demo_i ...
- JSF dataTable 添加列 动态创建数据表 列
@Named @ViewScoped public class LiveRangeService implements Serializable { private List< Map<S ...
- angular JS中使用jquery datatable添加checkbox点击事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...
- elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
文章目录 1.添加新用户,通过dialog的弹窗形式 1.1 添加的按钮 1.2 调用方法设置窗口可见 1.3 窗口代码 1.4 提交注册信息方法 1.5 使用mybatisPlus方法进行添加信息到 ...
- bootstrap 列表 表格 表单 复选 单选 多选 输入框组
一.列表 ul li 二.表格 table (http://www.runoob.com/bootstrap/bootstrap-tables.html) 1. 基本表格 <table cla ...
- wpf中为DataGrid添加checkbox支持多选全选
项目中用到DataGrid, 需要在第一列添加checkbox, 可以多选.全选. 其中涉及的概念DataTemplate, DataGridCellStyle, DataGridCellContro ...
- JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)
需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...
- DevExpress GridControl使用教程:之 添加 checkbox 复选框
添加一列,FieldName为"FLAG",将ColumnEdit设置为复选框样式. gridview1 =>optionsbehavior => editabl ...
随机推荐
- yii2-imagine的使用
<?php /** * 图片常用处理 * * 需要 yii/yii2-imagine 的支持 * php composer.phar require --prefer-dist yiisoft/ ...
- C构造类型 数组
一.数组是什么 一组有个固定大小.相同数据类型的数据的集合. 数组可以分为:一维数组.二维数组.三维数组....(维数不止一维:多维数组) 表格 : 行和列(二维数组) 二.一维数组 1.一般形式 类 ...
- Linux下使用Docker部署nacos-server(单机模式),丧心病狂的我在半夜给UCloud提交了一份工单
1. 拉取nacos-server镜像 进入 Docker Hub 查看nacos-server最新版本为 nacos-server:1.4.0 配置阿里云镜像加速 sudo mkdir -p /et ...
- 线性代数中的线性方程组(chapter 1)
目录 线性代数中的线性方程组 线性方程组 行化简解法和阶梯型矩阵 向量方程 矩阵方程$Ax = b$ 线性代数中的线性方程组 第一章从线性方程组的角度,通过解线性方程组,开始解释数学矩阵,以及和线性代 ...
- mfc c++优化
1.不住求精度时,尽量使用单精度浮点型2.使用32位数据类型3.使用有符号和无符号整型: 前提:无需考虑正负时 double x; int i; x = i; 使用有符号:unsigned int i ...
- 【GDKOI2014】JZOJ2020年8月13日提高组T4 内存分配
[GDKOI2014]JZOJ2020年8月13日提高组T4 内存分配 题目 Description Input Output 输出m行,每行一个整数,代表输入中每次程序变化后系统所需要的空闲内存单位 ...
- WPF 学习笔记(一)
一.概述 WPF(Windows Presentation Foundation)是微软推出的基于Windows 的用户界面框架,随着.NET Framework 3.0发布第一个版本.它提供了统一的 ...
- 第7.11节 案例详解:Python类实例变量
上节老猿介绍了实例变量的访问方法,本节结合一个具体案例详细介绍实例变量访问. 本节定义一个Vehicle类(车),它有三个实例变量self.wheelcount(轮子数).self.power(动力) ...
- CobaltStrike3.14&3.8安装&中文乱码解决
工具简介 Cobalt Strike 一款以 Metasploit 为基础的 GUI 框架式渗透测试工具,集成了端口转发.服务扫描,自动化溢出,多模式端口监听,exe.powershell 木马生成等 ...
- 攻防世界 web进阶区 lottery
首先进入题目的页面. 按其要求登录.然后看到以下界面. 御剑扫描目录,发现了robots.txt (robots协议) ,进入查看 进入.git/目录,用神器 GitHack 下载文件. 然后查看源码 ...