zoukankan      html  css  js  c++  java
  • dataTables 添加行内操作按钮

    在上一篇博客中我们提到了用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
  • 相关阅读:
    CSS技巧(二):CSS hack
    CSS技巧(一):清除浮动总洁
    js中apply方法的使用
    call 方法
    正则表达式
    【js事件详解】js事件封装函数,js跨浏览器事件处理机制
    [BZOJ 4300] 绝世好题
    [SPOJ1557] Can you answer these queries II
    [Codeforces 877E] Danil and a Part-time Job
    [Codeforces 914D] Bash and a Tough Math Puzzle
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7093077.html
Copyright © 2011-2022 走看看