datatable

「爱情、让人受尽委屈。」 2022-03-26 10:18 246阅读 0赞

最近在使用datatable组件，利用它处理一些页面和表格，利用写好的框架处理数据，首先会遇到csrf的问题，发送ajax会遇到 400状态码错误(坏的请求)，决解的思路是：

一，在<head>中添加<meta>(如下)

二，在js中获取csrf\_tocken的值

var csrf_token = $(window.parent.document.getElementsByTagName("meta")[5]).attr("content");

三，在ajax中添加headers

headers: {
        "X-CSRFToken": csrf_token
    },

这样就解决了csrf 的问题。

..............................................................................................................................................

datatable它是基于boorstrat做的一些封装，如果要搞清楚里面的关系和逻辑，还需要摸索，例如下面的代码

var oTable = $('#editable-sample').dataTable({
        "aLengthMenu": [ //分页的数组
            [5, 15, 20, -1],
            [5, 15, 20, "All"] // change per page values here
        ],
    
        // set the initial value
        "bAutoWidth":false, //自动适应宽度
        "bLengthChange":true,
        "bPaginate":true,
        "iDisplayLength": 5, //用于指定一屏显示的条数，需开启分页器
        "sDom": "<'row'<'col-lg-6'l><'col-lg-6'f>r>t<'row'<'col-lg-6'i><'col-lg-6'p>>", //这是用于定义DataTable布局的一个强大的属性
        "sPaginationType": "bootstrap", //用于指定分页器风格
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page",
            "oPaginate": {
                "sPrevious": "Prev",//前一页
                "sNext": "Next"  //后一页
            }
        },
        "aoColumnDefs": [{
                'bSortable': false,
                'aTargets': [0]
            }
        ]
    });

oTable是获取到整个页面表格的数据，

var nRow = $(this).parents('tr')[0]; # 当前行的数据

oTable.fnDeleteRow(nRow); # 删除这行数据，nRow指的是删除这行数据

var sData = oTable.fnGetData(nRow); # 获取当前行中的数据，这里有个坑，它得到的是数组，不是对象。

var aiNew = oTable.fnAddData(['', '', '', '', '', '','','','<a class="edit" href="">Edit</a>', '<a class="cancel" data-mode="new" href="">Cancel</a>' ]); # 当在页面添加/修改数据后，''这里会得到你添加/修改的数据，在把当前(列表)的数据添加到oTable中