jquery datatable 全選，反選參考文檔

本文轉載自查看原文 2021-02-03 10:29 558 Html、JavaScript

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery checkbox 全選反選等。。。 jQuery實現全選、反選和不選功能 jQuery實現的全選、反選和不選功能 jQuery實現全選/反選和批量刪除 jquery easyui tree的全選與反選 jquery實現全選和反選功能 jquery中checkbox的全選與反選 jquery一鍵控制checkbox全選，反選，全不選。 JQuery實現全選、全不選和反選功能 jquery實現全選、不選、反選的兩種方法

jquery datatable 全選，反選 參考文檔