Datatable implements click on a row of data to transfer the row information

Datatable implements click on a row of data to transfer the row information

If you only need to pass one parameter, you can use the following method

<table id="table" style="width:100%;">
    <thead>
        <tr style='background-color:#c2c2c2'>
            <td width="10%">Id</td>
            <td width="10%">note</td>
            <td width="10%">more</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

function create_table() {
        if (table) {
            table.clear();
            table.destroy();
            table = null;
        }
        
        $.ajax({
            type: "POST",
            crossDomain: true,
            contentType: 'application/json',
            url: "自己想要获取的url",
            data: JSON.stringify({
                "key": "value"
            }),
            success: function (data) {
                tdata = data.data;
                tablecurr = $("#table").DataTable({
                    data: tdata,
                    columns: [
                        {
                            "data": 'id',
                            "orderable": false,
                            "render": function (rowdata, type, row) {
                                return row.task;
                            }
                        },
                        {
                            "data": 'note',
                            "orderable": false,
                            "render": function (rowdata, type, row) {
                                return row.note;
                            }
                        },
                        {
                            "data": 'more',
                            "orderable": false,
                            "render": function (rowdata, type, row) {
								var btn = ""                    
								btn += '<a class="downloadbtn btn-xs btn-purple" id="testBtn" onclick="test_btn(' + row.id + ')" >测试按钮</a>'
								return btn;
                            }
                        }
                    ]
                });
            }
        });
    }
}

function test_btn(id) {
	console.log("id = "+id);
}

This method is suitable for the case of passing a parameter, generally passing an id to anchor a piece of data.

Pass the entire row of row data as a parameter

<table id="table" style="width:100%;">
    <thead>
        <tr style='background-color:#c2c2c2'>
            <td width="10%">Id</td>
            <td width="10%">note</td>
            <td width="10%">more</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

function create_table() {
        if (table) {
            table.clear();
            table.destroy();
            table = null;
        }
        
        $.ajax({
            type: "POST",
            crossDomain: true,
            contentType: 'application/json',
            url: "自己想要获取的url",
            data: JSON.stringify({
                "key": "value"
            }),
            success: function (data) {
                tdata = data.data;
                tablecurr = $("#table").DataTable({
                    data: tdata,
                    columns: [
                        {
                            "data": 'id',
                            "orderable": false,
                            "render": function (rowdata, type, row) {
                                return row.task;
                            }
                        },
                        {
                            "data": 'note',
                            "orderable": false,
                            "render": function (rowdata, type, row) {
                                return row.note;
                            }
                        },
                        {
                            "data": 'more',
                            "orderable": false,
                            "render": function (rowdata, type, row, meta) {
								var btn = ""                    
								btn += '<a class="downloadbtn btn-xs btn-purple" id="testbtn_{
     
     {0}}">测试按钮</a>'.format(row.task)
								var btn_name = "#testbtn_{
   
   {0}}".format(row.task);
								$(btn_name).on('click', function() {
									// 从行检索信息并将其用作参数
									// var rowData = tablecurr.row($(this).closest('tr')).data();
									var rowData = tablecurr.row(meta.row).data();
									test_btn(rowData);
									});
								return btn;
                            }
                        }
                    ]
                });
            }
        });
    }
}

function test_btn(row) {
	console.log("row ------");
	console.log(JSON.stringify(row));
}

This situation applies to the situation where the entire data needs to be obtained directly at the front end, where

var rowData = tablecurr.row($(this).closest('tr')).data();
var rowData = tablecurr.row(meta.row).data();

You can get the entire data of the clicked row.