首页 > 其他分享> > jquery datatable 全选，反选参考文档

jquery datatable 全选，反选参考文档

2021-02-03 10:32:42 作者：互联网

1 版本号

DataTables 1.10.12

2 API文档地址

http://datatables.club/reference/option/ 官方option
http://datatables.club/reference/api/
https://datatables.net/reference/option/ 官方(英文)
http://datatables.club/upgrade/1.10-convert.html 1.10.x与1.9.x参数名对照表
https://blog.csdn.net/zhu_xiao_yuan/article/details/51252300 datatables参数配置详解
http://datatables.club/manual/server-side.html 服务器处理(Server-side processing)
https://www.cnblogs.com/amoniyibeizi/p/4548111.html api使用详解
https://www.datatables.net/download/release各种datatables插件下载
 https://github.com/ssy341/datatables-cn/issuesgithub问题收集
 http://datatables.club/reference/button/ 按钮文档
http://datatables.club/reference/button/excel.html 导出excel的文档

3 常见操作项

表格（tables）列（Columns）行（Rows）单元格（Cells）核心方法（Core）工具类（Utilities）

4 初始化方法

4.1 HTML部分代码参考:

注：table table-striped table-bordered table-hover四个类名不能缺少，如缺少table会造成表头空白

<table id="tablelist" class="table table-striped table-bordered table-hover"></table>

4.2 JS代码参考

var tablelist;
$(function(){
    initTablelist();
});
function initTablelist(){
    tablelist = $('#tablelist').DataTable({
        "select": {"style": 'single'},// single：单行  multi：多行 
        "dom":"<'#datatableTopBox.datatablesTopStatusBar'<'#datatableTopCon'><'.fl.datableSearch'f>B>rt<'info'l>p",
        "buttons": [
            {
                text: '<i class="fa fa-plus"></i>&nbsp;'+$.i18n.prop('public.button.New'),
                action: function ( e, dt, node, config ) {
                    gotoPurchaseOrderDetail();
                }
            },
        ],
        "order":[],
        "bStateSave":true,
        "stateLoadParams": function (settings, data) {
           data.search.search="";//清除搜索框信息
           data.order = [ ];//进入页面乱序
           if(!commonRentruJson.info.isReturn){
               data.start=0;//显示第一页数据
           }
        },
        "ajax":{
            "data":{},
            "url":$ctx + "",
        },
        "columns":[//设定列的所有初始属性
            dataTableConfig.checkBoxColumn(),//复选框列
            dataTableConfig.serialNumberColumn,//序号列
            {"title":$.i18n.prop('TenderingManagement.RequisitionNumber'),"width":"70px","data": "purchaseCode","searchable": true},
            {"title":$.i18n.prop('public.form.operate'),"width":"100px","data": null,"orderable":false,"searchable": false,"className":"notitle",
                render:function(data,type,row,meta){
                    var id = data.enterpriseId;
                    var str;
                    if(data.auditState=="3"){//查看 编辑
                        str = '<a onclick="gotoDetail(\"'+id+'\")">'+ $.i18n.prop('public.button.View')+'</a>&nbsp;<a onclick="gotoEdit(\"'+id+'\")">'+ $.i18n.prop('swal.Edit') +'</a>';
                    }else{
                        str = '<a onclick="gotoDetail(\"'+id+'\")">'+ $.i18n.prop('public.button.View')+'</a>';//查看
                    }
                    return str;
                },"visible":true,JMisMandatory:false,JMdisabled:false,JMcolumnAsign:"operatingData"
            }//操作
        ],
        "initComplete":function( settings, json){
            dataTableOrdinalFunction(this);//序号列12345顺序显示
        }
    });
}

其他参考配置项：

"lengthChange":true,//是否允许用户改变表格每页显示的记录数
"searching":true, //搜索框
"bSort":true,   //排序

5常用API整理

5.1 设置title提示：

第一种：最新方案（2019年8月27日13:48:35）
不配置drawCallback即可自动显示title悬停提示，不需要提示的列(如:操作列)增加"className": "notitle"
注：

私人配置drawCallback项为空会重置datetable导致自动悬停提示失效，若确实需要用到drawCallback，需要在drawCallback里面按照第二种方法配置
除了不需要悬停提示的列用"notitle"外，其它列如需要配置className时，命名不要包含notitle，因为在响应式中添加了notitle包含验证，若加上会导致此字段没有title效果
示例：

第二种：目前还生效，写配置时请尽可能采用第一种
注：如多列不需要悬停提示，td:not('notitle')即可（对应列需配置"className":"notitle"）
通用表示法

"drawCallback": function(settings, json){
    $.each($("#"+ settings.sTableId +" tbody tr td:not(:last-child)"),function(i,v){
        $(v).attr("title",$(v).text())
    })
},

指定特定的ID

"drawCallback": function(oSettings, json){
    $.each($("#WorkPermitApplyList tbody tr td:not(:last-child)"),function(i,v){
        $(v).attr("title",$(v).text())
    })
},

5.2第一列复选框

"aoColumns":[
    {"title":"<input type='checkbox' style='display:block;width:15px;height:15px;margin-left:10px' onclick='checkAll(this)'>", "data":null,"width":"80px","bSortable": false},

],
"columnDefs":[
    {   'targets': [0],
        "visible" : true,
        'searchable':false,
        'orderable':false,
        'render': function (data, type, row){
            return '<input type="checkbox" style="width: 15px;height: 15px;vertical-align:middle;margin-left:10px;" data-id ="'+ row.enterpriseId + '"/>';
        }
    },
]

5.3水平滚动条：

"scrollX": true, 已配置为默认配置
下面是最初用的解决滚动方法,需要去掉：

"initComplete":function( settings, json){//初始化结束后的回调函数
    $("#contractList").wrap("<div class='datatables-scroll'></div>");
}

5.4 单选、多选、全选、全不选事件

comtabsclick('example',initDatatables);//单行选中事件
comtabsclickm('example',initDatatables);//多行选中事件
以下是新增方案： "select": {"style": 'single'},// single：单行 multi：多行

1.简单调用

select: true, https://datatables.net/extensions/select/examples/initialisation/reload.html

2.blurable: true 点击表格意外地方，将失去选中

https://datatables.net/extensions/select/examples/initialisation/blurable.html
select: {
style: 'os',
blurable: true
}

3.复选框 https://datatables.net/extensions/select/examples/initialisation/checkbox.html

select: {
style:'os',
selector: 'td:first-child'
},

4.多选行 https://datatables.net/extensions/select/examples/initialisation/multi.html

select: {
style: 'multi'
}

5.单选 https://datatables.net/extensions/select/examples/initialisation/single.html

select: {
style: 'single'
}

6.获取选中

var count = table.rows( { selected: true } ).count();
var rowData = table.rows( indexes ).data().toArray();

7.全选和全不选

table.rows().select();
table.rows().deselect();

5.5 单行删除的方法(多行删除方法)

example.row(11).remove().draw(); row里面是第几行数据，从0开始
example.rows( '.selected' ).remove().draw() 删除表格中符合某类的数据(多行删除)
示例：点击某个单元格元素删除此行方法

$('#example tbody').on( 'click', '.sorting_1', function () {
    $('#example').DataTable().row( $(this).parents('tr') ).remove().draw();
});

$("#del").click(function(){
    var rowData = initDatatables.rows('.selected').data();
    if(rowData.length==0){
        toastr.warning("请选择一条数据！");
        return;
    }else{
        var sid=rowData[0].sid;  //主键
        code...
    }
});

5.6 排序设置

格式："order": [[ 0, 'asc' ],[ 1, "desc" ]]
asc:升序 desc:降序

5.7 table行点击前面复选框选中事件

$('#planTaskFeedbackConfirmList tbody').on('click', 'tr', function (e) {
    if ($(this).hasClass('selected') ) {
        $(this).removeClass('selected');
        $(this).find(".checkbox_select").attr("checked",false);
    }else {
        $(this).addClass('selected');
        $(this).find(".checkbox_select").attr("checked","checked");
    }
});

5.8 重新绘制表

projectStaffPlanningDetailTable.destroy();
$("#projectStaffPlanningDetailTable").empty();
initMyTableTables(url);
直接重绘
var url = $ctx + "/module/invitingProject?projectSid="+$("#projectSid").val();
dataGridTables.ajax.url(url).load();

拼接参数问题
若需要重载函数且有拼接参数，参数写data里面，不要拼接在url后面,且重复请求时先重置data

function search(){
    projectStatusListTables.settings()[0].ajax.data = {
        jm_app: 'app',
        userCode: USER_INFO.usercode,
        project: $("#search-drop-down").val()
    };
    var url = $ctx + "/module/projectStatusManagement/findInfoList";
    projectStatusListTables.ajax.url(url).load();
}

5.9 集成下拉框selectpicker5

css:

.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
    width: 80%;
}
table.dataTable tbody tr td:last-child{
        overflow: visible;
}

行添加事件

$("#btn").on("click",function(){
    var rowJson = {
            nociteSid:null,
            tenderCode:1111,
            tenderName:"11111",
            bidOpeningDate:new Date(),
            bidOpeningAddress:"还是",
            isOpenRecord:"s"
     };
    $('#openBidRecoredListCall').DataTable().row.add(rowJson).draw();
})
"columnDefs": [
    {
        "targets":[-1],//扩展列显示列位置
        "width":"190px",
        "class": "but_xq",
        "data":"taskSid",
        "orderable":false,
        "bSortable": false,
        "searchable": false, //是否参与搜索
        "mRender": function (data) {
         return '<select style="width:60%;" class="selectpicker" data-live-search="true" data-size="5" ><option>1</option></select>';
    }

}],
"drawCallback": function (settings, data) {
    $('.selectpicker').selectpicker();
    $('.selectpicker').unbind("changed.bs.select").on('changed.bs.select',function(e){
        console.log($(this).val());//下拉框更新后的值
        console.log(openBidRecoredListCall.row( $(this).parent().parent() ).data());//下拉框所在行的值
    });
},

5.10 获取datatables的总行数(fnInitComplete当中使用)

var info = graphicSettings.page.info();
var dataRows = info.recordsTotal;

5.11 行绘制事件(例：默认行选中)

"createdRow": function( row, data, dataIndex ) {
    if ( data.creator == "夏云飞" ) {
        $(row).find("td:eq(2)").css("color","red");
        $(row).find("td:eq(0)").attr("checked","true");
        $(row).addClass( 'selected' );
    }
},

5.12 切换人员/项目后datatables显示为空

原因：上一个table分页有100并且选择了第100页，现在只有50页面，bStateSave保存了状态，导致table选择的是第100页，所以页面显示空
解决办法："bStateSave":false, //设置为false
注释说明：状态保存(stateSave)，开启或者禁用状态储存。当你开启了状态储存，Datatables会存储一个状态到浏览器上，包含分页位置，每页显示的长度，过滤后的结果和排序。当用户重新刷新页面，表格的状态将会被设置为之前的设置。

5.13 单选多选

参数：tabid,tabs
comtabsclick('example',initDatatables); 单选方法
comtabsclickm('example',initDatatables); 多选方法

5.14 上移下移功能

onclick='tableMoveUpward("#setUpBlock")' 上移
onclick='tableMoveDownward("#setUpBlock")'下移
注：暂时只适合只有一页的情况下

5.15 拖动列宽

<script src="<c:url value='/css/datatables/media/js/colresizable.js?v=${version}'/>"></script>

"initComplete": function(oSettings, json){
    $('#documentListTables').colResizable();
},

https://github.com/Silvacom/colResize github参考样例
http://www.bacubacu.com/colresizable/插件官网

参考这位大佬来筛写的，有兴趣可去看 https://www.yuque.com/jmweb/pc/datatables

标签：jquery,function,false,datatables,反选,全选,table,data,select
来源： https://www.cnblogs.com/jxl123456/p/14365664.html

jquery datatable 全选，反选 参考文档