dataTables添加序号和行选中框

 1 <table id="mytable" class="table table-striped table-bordered" width="100%">
 2     <thead>
 3         <tr>
 4                 <th>序号</th>
 5                <th>
 6                     <input type="checkbox" class="checkall" />
 7                 </th>
 8             </tr>
 9     </thead>
10    <tbody></tbody>
11 </table>
 1 $(document).ready(function(){
 2     var table = $("#mytable").DataTable({
 3             "processing":true,
 4              "ajax": {
 5                  "url": "user/getTableDatas",
 6              },
 7              "columns": [
 8                 {"data":"index",//序号
 9            "render":function(data,type,row,meta){
10             var startIndex = meta.settings._iDisplayStart;
11             return startIndex+meta.row+1;
12         }},
13                 {
14                     "sClass": "text-center",
15                     "data": "id",//行单选框
16                     "render": function (data, type, full, meta) {
17                       return ‘<input id="checkchild" type="checkbox"  class="checkchild"  value="‘ + data + ‘" />‘;
18                     },
19                     "bSortable": false
20                 }
21              ],
22              //行被创建时调用
23              "createdRow":function(row,data,dataIndex){
24
25              }
26     });
27     //复选框全选
28     $(".checkall").click(function () {
29           var check = $(this).prop("checked");
30           $(".checkchild").prop("checked", check);
31           checkButton();
32     });
33     //行内的选择框选中
34     $(document).on("click","#checkchild",function(){
35         var check = $(this).prop("checked");
36         if(check && check==true){
37             $(this).prop("checked",false);
38         }else{
39             $(this).prop("checked",true);
40         }
41         checkButton();
42     });
43
44     //选中行事件
45     $("#mytable tbody").on("click","tr",function(){
46         var check = $(this).find(".checkchild").prop("checked");
47         if(check && check==true){
48             $(this).find(‘.checkchild‘).prop("checked",false);
49         }else{
50             $(this).find(‘.checkchild‘).prop("checked",true);
51         }
52         checkButton();
53
54     });
时间: 2024-10-16 08:14:09

dataTables添加序号和行选中框的相关文章

R语言为数据框添加列名或行名

1.添加列名 wts=c(1,1,1) names(wts)=c("setosa","versicolor","virginica") 2.为矩阵添加列名和行名 wts=matrix(0,3,4) row=c("row1","row2","row3") column=c("setosa","versicolor","virginica&q

Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有mvc的特点). 1. QStandardItemModel在QTreeView中的使用 使用QTreeView的对应模型是QStandardItemModel,这个是Qt对应ui界面最有用的模型,它可以用于树形控件.列表控件.表格控件等等和条目有关的控件.QStandardItemModel用于列表

EasyUI+JavaScript 添加和修改弹出框按钮

写这篇文章只是想吐槽一下在做三个弹出框按钮的心酸史,为什么只写两个呢?因为之前看到过别人写了一个删除的,所以我只写剩下的两个吧!现在做的系统总是涉及到增删改的总会上面三个好看的按钮,下面一个好看的DataGrid. 添加和修改弹出框: 首先要加载我们做好的添加和编辑弹出框. <span style="font-size:14px;"><div id="addTemplate"> @* 加载添加流程对话框 *@ @{Html.RenderPar

现实项目中用户随意添加序号,如何用SQL解决序号连续性问题

前段时间,一直忙于学习golang语言,没有时间整理项目中用到的方法,今天趁着有空写下笔记. 项目中,遇到一个比较"刁钻"的需求:用户用Excel导入到系统里,每一行前面都有一个序号,序号分成两部分,如下所示: 左边部分是大序号,右边是小序号,类似于书籍目录那样,序号是由用户自己编写,而且用户可以随意在Excel序号插入任何新序号,用户不保证新增或者编辑的序号是否正确,我们要做的是检查这些序号. 以下是我的检查思路: 1.序号是否连续 我们要事先给用户做一个限制,在大序号后面添加小序号

jQuery_review之table中根据行选中,进行背景变色和radio选中

在各种WEB系统中经常可以看到类似的操作,点击中列表的某一行,然后当前行就会变成其他的颜色,并且其中的radio就会被选中.并且一般还会鼠标滑过的时候的动态特效,比如鼠标滑过当前行的时候会有一个变色的样式.趁着复习jQuery的机会,看一下使用jQuery来实现这个功能的步骤. 在这个功能当中,有一个需要注意的小知识点:如何增加一个radio?在HTML中,增加一个HTML使用如下的代码<input type="radio" name="fruit">这

Angularjs bootstrap table多选(全选),支持单击行选中

最终实现效果:  index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-anima

jqgrid 行选中multiboxonly属性说明

multiboxonly属性值为布尔值. false:点击行时,同时选中改行的复选框,支持多行选中 true:点击行时,只将点击的行处理为选中状态,切换其他行时,原选中行的选中效果被取消 (永远只有一行被选中.如果选中多行,需要去直接点击各行最前面的复选框) 截图效果如下:

js点击行选中checkbox

1.点击行选中checkbox复选框 //点击行勾选 $("#Qub_tb_List").on("click", "tr", function () { var input = $(this).find("input"); if ($(input).val() == "on") { return; } $("#Qub_tb_List *").not(input).prop("c

CAD技巧,如何在CAD中添加一个多行文本?

CAD技巧,如何在CAD中添加一个多行文本?在编辑CAD图纸的过程能够为了更加方便快捷建筑设计师们都会借助CAD编辑器来绘制图形,但是一张CAD图纸中的内容太多,在有的地方需要给CAD图纸进行一些标注,以便更好的查看,但是如何在CAD中添加一个多行文本?小伙伴们知道要怎么来操作吗?下面小编就利用迅捷CAD编辑器标准版来教教大家如何在CAD中添加一个多行文本?想要了解的朋友就一起来看看吧! 使用第一步:在电脑桌面中没有下载安装迅捷CAD编辑器的小伙伴们,在电脑中任意的打开一个浏览器,在浏览器的搜索