jquery DataTables动态更新某一行某一列的值、添加和删除行、根据数据决定动态隐藏列,通过下拉列表选择显示和隐藏列

1、首先定义一个DataTable对象,如下代码:

var datas = $('#datas').DataTable({
            buttons: [
                { extend: 'print', className: 'btn dark btn-outline',exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7 ] }},
                { extend: 'copy', className: 'btn red btn-outline',exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7] }},
                { extend: 'pdf', className: 'btn green btn-outline',exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7 ] }},
                { extend: 'excel', className: 'btn yellow btn-outline ',exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7 ] }},
                { extend: 'csv', className: 'btn purple btn-outline ',bom:true,exportOptions: {columns: [ 0, 1, 2,3,4,5,6,7 ] }}
            ],
            searching:true,
        });

2、通过以下方式获得某一行的数据,其中0表示按照那一列,context 表示要从这个表中查找的内容,比如第一行第一列的值为1,那么返回的index值就是0,然后在根据行索引来获得这一行的数据:

var index = datas.column(0).data().indexOf( context );
var row = datas.row(index).data();

3、修改row中的值,并更新到表格中,如下:

row[5]="111111111";
row[6]="111111111";
row[7]="111111111";
datas.row(index).data(row);//不会从后台重新获取数据
datas.row(index).data(row).draw();//会从后台重新过去数据

row是更新后的值,然后在调用draw即可。

4、添加行:

$('.datatable').dataTable().fnAddData([
"1",
"2",
"3",
"4",
"<a href='#' class='delurl'>删除</a>"]);

5、删除行:

row.remove().draw(false);

6、根据数据来隐藏列

"drawCallback": function( settings ) {
			 var api = this.api();
			 var row1 = api.rows().data();
			 var idx = 0;
			 var isShow = 0;
			 row1.each(function(row,i){
				 if (row.xhCode!=""&&row.xhCode!=undefined){//判断数据是否为空
					 isShow++;//如果有不为空的,isShow肯定大于0,因此显示
				 }
			 });
			 if (isShow<=0) { //如果是0,那么返回的所有数据肯定都为空,因此不显示
				 sfmxTable.columns( [4] ).visible( false );
			 } else {
				 sfmxTable.columns( [4] ).visible( true );
			 }
		 },

7、下拉列表框:

(1)先引入css和js,如:

<link href="plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="plugins/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="plugins/bootstrap-select/js/i18n/defaults-zh_CN.js"></script>

(2)html代码:

<div class="btn-group" >
                                        <div class="input-group input-group-sm">
                                            显示隐藏列:
                                        </div>
                                    </div>
                                    <div class="btn-group" >
                                        <div class="input-group input-group-sm">
                                            <select class="selectpicker"  multiple data-selected-text-format="count > 3">
                                                <option value="2">病例数</option>
                                                <option value="3">住院总收入</option>
                                                <option value="4">住院例均收入</option>
                                                <option value="5">DIP分值</option>
                                                <option value="6">药品收入</option>
                                                <option value="7">药品例均收入</option>
                                                <option value="8">药品DIP分值</option>
                                                <option value="9">耗材收入</option>
                                                <option value="10">耗材例均收入</option>
                                                <option value="11">耗材DIP分值</option>
                                                <option value="12">耗材收入占比</option>
                                                <option value="13">百元消耗</option>
                                                <option value="14">住院床日数</option>
                                                <option value="15">平均住院日</option>
                                                <option value="16">收费材料成本</option>
                                                <option value="17">非收费材料成本</option>
                                                <option value="18">例均耗材成本</option>
                                                <option value="19">案例占比</option>
                                            </select>
                                        </div>
                                    </div>

(3)将默认选择列打上对勾,如:

//多选框
            $('.selectpicker').selectpicker();//必须先初始化
            //$('.selectpicker').selectpicker('val', ['2','3','4','5','6','7','8','9','10','11']).trigger("change");//当改变时会自动触发change
            $('.selectpicker').selectpicker('val', ['2','3','4','5','6','7','8','9','10','11']).trigger("change");

 (4)datables设置默认隐藏列属性,可以通过:"visible":false,来设置,如:

(5) 根据选择来设置datatables显示和隐藏,如:

$('.selectpicker').on('change',function(){
                var values=$(this).val();//获得选择框中的选中的值,返回的是一个数组,如果没有选择,则返回为null
                var showCols=[];
                var tempCols=[];
                var hideCols=[];
                if(values!=undefined&&values!=null) {
                    values.forEach(function(v,i){//现将选择的保存成一个数组
                       var vNum=parseInt(v);
                        tempCols[vNum]=vNum;
                        showCols.push(vNum);
                    });
                }
                for(var idx=2;idx<=19;idx++) {//在找没有选择的保存成一个数组
                    if(tempCols[idx]==undefined) {
                        hideCols.push(idx);
                    }
                }
                datas.columns( showCols ).visible(true);//将选择的列显示
                datas.columns( hideCols ).visible(false);//将未选择的隐藏
            });

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值