datatable

最新推荐文章于 2021-08-26 11:26:09 发布
最新推荐文章于 2021-08-26 11:26:09 发布
阅读量368 收藏
点赞数
分类专栏： html datatable fnDeleteRow fnGetData fnAddData X-CSRFToken
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq951078155/article/details/86514616
版权
html 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
datatable
1 篇文章 0 订阅
订阅专栏
fnDeleteRow
1 篇文章 0 订阅
订阅专栏

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

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

<meta name="csrf-token" content="{{ csrf_token() }}">

二，在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中
用程序摆平一切
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
datatables动态表头ajax,jQuery Datatables - 来自AJAX响应的表头
weixin_39842918的博客
08-05 546
我正在通过Datatables ajax请求检索包含不同行长度的数据集 . 例如，一个响应可能是：... ['jan', 'feb', 'march', 'april'] ...不同的响应只会是：... ['jan', 'feb'] ...我见过的大多数示例都已将表头文件硬编码到HTML中 . 我想要做的是动态更新标头及其各自的列数据 .我希望能够做到这样的事情，我能够用dataSrc更新 Hea...
jquery datatable的使用及editable
Tomcat那些事儿
02-15 1119
[code="js"] exoTable = $('#examples').dataTable({ bJQueryUI: true, "bServerSide": true, "sAjaxSource": "XXXX.action?"+"xxx="+params, "sPaginationType": "full_numbers",
datatable 使用
gaisidewangzhan1的博客
06-17 423
一次完整的使用dataTable：为方便以后使用，特记录，网上综合结果。HTML：&lt;div class="mt-20"&gt; &lt;table class="table table-border table-bordered table-bg table-hover table-sort table-responsive" id="bigDataList"&gt; ...
mysql如何初始化datatable_如何在初始化之后更改DataTables的aLengthMenu
weixin_39677106的博客
02-02 750
2 个答案:答案 0 :(得分：1)try this: http://jsbin.com/moyonos/edit?js,output$(document).ready(function () {$('#example').DataTable({pageLength:25,"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],data: s...
datatable的使用
lgxzzz的博客
08-26 1204
1:导入包： URL：http://www.datatables.net/ 分别导入css和js文件 Html代码 <styletype="text/css"title="currentStyle"> @import"css/demo_page.css"; @import"css/demo_table.css"; @import"css/demo_table_jui.css"; </style> ...
datatable插件
11-04
`Datatable`是一款广泛使用的JavaScript库，主要用于创建和管理数据表格。它提供了丰富的功能，包括但不限于数据的排序、过滤、分页以及自定义显示。在Web开发中，它是一个非常实用的工具，尤其是在处理大量数据时，...
DataTable分组
12-25
在.NET框架中，DataTable是一个非常重要的数据容器，它允许开发者在内存中存储和操作结构化的数据。本篇文章将深入探讨如何在C#中利用DataTable进行数据分组，以实现更高效的数据处理和分析。 首先，我们需要理解...
datatable学习资料
09-19
**Datatable学习指南** 在IT领域，特别是在Web开发中，数据展示是不可或缺的一部分。DataTable是一个强大的JavaScript库，它允许开发者创建交互式、功能丰富的表格，能够处理大量的数据并提供多种排序、过滤和分页...
C# datatable删除多行
07-07
在C#编程中，DataTable是System.Data命名空间中的一个类，它用于存储和操作数据集中的数据表。在处理大量数据时，有时我们需要删除DataTable中的特定行或多行。本篇将详细介绍如何在C#中有效地实现DataTable的多行...
DataTable插件
10-29
**DataTable插件详解** DataTable是一款基于jQuery的开源表格插件，它为HTML表格提供了丰富的功能和高度的灵活性。这个插件旨在使数据呈现更加互动、高效，并且具有强大的数据处理和展示能力。以下是对DataTable...
jquery.dataTable 绑定数据源
ejinxian的专栏
05-08 5067
var oTable=$('#sample_editable_1').dataTable({                                         "iDisplayLength":15,                                         "sPaginationType": "bootstrap",                  
关于 dataTable 组件使用
u013742084的专栏
03-26 1645
偶然发现一个叫 dataTable  的组件，觉得很好用，于是研究了一番，下面是代码 var lang = { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。
dataTable分页功能，使用到的几个配置项
xiaozhi_free的博客
07-26 1万+
$('#example').dataTable({                 "bLengthChange": true, //开关，是否显示每页显示多少条数据的下拉框                 "aLengthMenu": [[5, 10, 25, -1], [5, 10, 25, "所有"]],//设置每页显示数据条数的下拉选项                 'iDisplayL...
JQuery使用Datatable插件（二）——使用AJAX与后端交互
ACodeBird
07-10 6083
一、html代码（我自定义了一个搜索框，同时用到了bootstrap框架） 注意引入相应文件，同时table一定要有thead <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Datatable利用ajax增删改查</title> <!-- 引...
dataTables-使用详细说明整理
热门推荐
行百里者半九十
11-29 33万+
本文共四部分：官网 | 基本使用|遇到的问题|属性表 一：官方网站：[http://www.datatables.net/] 二：基本使用：[http://www.guoxk.com/node/jquery-datatables] 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataTable();
前端常用功能记录(二)—datatables表格
weixin_34092370的博客
02-12 357
　　并不是所有的后台开发都有美工和前端工程师来配合做页面，为了显示数据并有一定的美感，jQuery的DataTables插件对于像我这样的前端菜鸟来说真是雪中送炭，当然对于专业的前端开发者来说它更是锦上添花！DataTables提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化、统计等强大功能。 　　工作中对程序员的学习模式才深有体会，不是从入门...
datatable总结常用api
halations的博客
12-17 2099
Table.fnDraw(boolean); // 重绘方法 true会回到表格的初始状态，例如回到第一页，false只是重新加载当前页。 fnClearTable(); // 清除表格 fnAddData(data); // 添加数据 fnGetData(index); // 根据提供的参数获取整个表，单个行或单个单元格的数据。 fnDeleteRow（mTarget，fnCallBack，b...
C# DATATABLE
最新发布
09-07
C# DataTable是一个表示内存中关系数据表的类。它由列和约束组成，可以映射到数据源中的列，包含计算所得的值、自动递增的值或主键值。 DataTable类用于定义和操作表的结构，包括列的定义和约束。它也可以包含行，其中存储着实际的数据。使用DataRow类可以对表中的数据进行检索、计算和处理。创建一个DataTable对象可以使用相应的构造函数，例如使用空表创建一个DataTable对象，或者使用指定名称的构造函数创建一个DataTable对象。要向DataTable添加列，可以使用Add方法来添加列。一个DataSet可以包含多个DataTable，这些DataTable之间可以建立关系。DataSet可以看作是一个小型的数据库，由多个DataTable和DataTable之间的关系组成。根据所提供的引用内容，以上是关于C# DataTable的描述。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值