dataTables 添加行内操作按钮
操作 添加 按钮 行内
2023-09-11 14:22:50 时间
在上一篇博客中我们提到了用dataTables 做一个分页表格。今天进一步进阶,做一个行内带操作按钮的表格。效果如图。
记得最基础的实现方式是,我们要在js 中拼接字符串,嵌入一个带按钮的语句。但是现在我们用dataTables插件,其实现方式非常简单。主要的页面还是和上篇博客中提到的一样。不过我们又给其设置了几个属性而已。
table = $('#table_local').DataTable({ // 通过ajax向后台controller请求数据 ajax : { url : "queryPagePapers", dataSrc : "data", data : function(d) { var searchContent = $( '#searchContent').val(); // 添加额外的参数传给服务器 d.extra_search = searchContent; }}, "columnDefs" : [ { // 定义操作列,######以下是重点######## "targets" : 3,//操作按钮目标列 "data" : null, "render" : function(data, type,row) { var id = '"' + row.id + '"'; var html = "<a href='javascript:void(0);' class='delete btn btn-default btn-xs' ><i class='fa fa-times'></i> 查看</a>" html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 编辑</a>" html += "<a href='javascript:void(0);' onclick='deleteThisRowPapser("+ id + ")' class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 删除</a>" return html; } } ],
看这样就可以了。平时多看看API和晚上的demo 都挺有好处的。关于datatables的更多使用,推荐一个网站,http://datatables.club/index.html
相关文章
- Spark 2.0 DataFrame map操作中Unable to find encoder for type stored in a Dataset.问题的分析与解决
- JQuery实现对html结点的操作(创建,添加,删除)
- JQuery实现对html结点的操作(创建,添加,删除)
- JQuery实现对html结点的操作(创建,添加,删除)
- MySQL - MySQL 8.0进阶操作:JSON
- Flex4_操作XML
- C++ code:向量操作之添加元素
- H7-TOOL固件发布V2.1.4,优化主界面,优化升级脱机烧录,增加导入功能,示波器操作说明增加485差分测量(2022-02-24)
- 使用ABAP编程实现对微软Office Word文档的操作
- 使用JDBC操作SAP云平台上的HANA数据库
- VB.net:VB.net编程语言学习之基于VS软件连接SQL Server(利用ADO.NET操作数据库/添加新数据源/DataGridView数据表格控件)的简介、案例应用之详细攻略
- 【最详细实战】实战项目添加操作日志(aop、注解实现)
- 从源码分析DEARGUI之draw的一系列操作
- 12 添加提交以及查看状态操作
- SpringBoot操作hbase
- 数据库与java操作小有体会
- js操作DOM在父元素中的结尾添加子节点注意
- 嵌入式linux开发,对pcf8563时钟操作报错:rtc-pcf8563 0-0051: low voltage detected, date/time is not reliable.
- 前端案例:飞机大战( js+dom 操作,代码完整,附图片素材)
- 【云原生】Prometheus Pushgetway讲解与实战操作
- python中的文件的追加操作