代码之家 › 专栏 › 技术社区 › VAAA

jQuery Datatable上的单元格按钮点击获取所有行单元格值

datatables jquery

VAAA · 技术社区 · 4 年前

我有以下代码 jQuery Datatable 我在最后一列有一个按钮。当用户单击它时,我需要获取所有列单元格值,以便将它们传递到模态中进行编辑。

 "fnDrawCallback": function (oSettings) {

                hideWaiting();

                // button to Edit the person
                $('[data-id="btnedit"]').on('click', function (e) {
                    var me = $(this);

                    e.preventDefault();

                    var personId = $(this).attr('data-personid');
                    
                    //*** HERE I WANT TO GET ALL ROW CELLS VALUES ***//

                    $this.showEditModal();
                });

            },
            "aoColumns": [
                { "sName": "Description", "bSortable": true },
                { "sName": "Name", "bSortable": true },
                { "sName": "Position", "bSortable": false },
                { "sName": "ContentUrl", "bSortable": false },
                { "sName": "HolidayType", "bSortable": false },
                { "sName": "LeaveType", "bSortable": false },
                {
                    "mData": null,
                    "bSortable": false,
                    "sWidth": "80px",
                    "sClass": "dt-body-center",
                    "mRender": function (data, type, row) {
                        var res = "";

                        res = '<a href="#" data-id="btnedit" data-personid="' + row[6] + '" data-toggle="tooltip" data-placement="top" title="" class="btn btn-primary"><i class="fa fa-pencil"></i></a>';

                        return res;
                    }
                },

0 回复 | 直到 4 年前

Kinglish 4 年前

也许是这样的

res = '<a href="#" data-id="btnedit" data-personid="' + row[6] + '" data-toggle="tooltip" data-placement="top" title="" class="btn-get-row btn btn-primary"><i class="fa fa-pencil"></i></a>';

$(document).ready( () => {
   $('.btn-get-row').click( (e) => {
      let myCells = $(this).closest('tr').find('td');
      let data = { 
          description: myCells[0].innerHTML,  // or myCells[0].find('input').val();
          name: myCells[1].innerHTML // or myCells[1].find('input').val();
         // ... and so on
      }
   })
})

推荐文章

Blues Clues · 如何添加选择下拉筛选器

11 月前

Sidou · 显示Grocery CRUD 2.0.1中DataTable列的总和

1 年前

Kumara · 每行的角度数据表添加按钮

1 年前

James · jQuery DataTables搜索窗格呈现

1 年前

happy beginer · html变量未定义

2 年前

Stanley Jones · 用JavaScript数组填充JQuery数据表

3 年前

GauravSolo · 在columndef datatable jquery中使用响应数据

3 年前

Azuren · 在转换为JSON之前,如何向数组中添加新的键和值?

3 年前

Jan M · 使用Django/Python在每行中使用Select表单的数据表

3 年前

Agent69 · DataTables日期范围筛选器,未获取第一个日期

3 年前