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
  • 相关阅读:
    poj3111 K Best 最大化平均值,二分
    cd732D Exams 二分
    cf448D Multiplication Table 二分
    hdu2199,double二分
    hdu3015,poj1990树状数组
    Codeforces Round #595 (Div. 3) D2Too Many Segments,线段树
    C#学习
    C#中单例的双重锁定模式
    C# HashSet 用法、Hashtable用法
    如何阅读他人的项目源代码程序
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7093077.html
Copyright © 2011-2022 走看看