Question

Attaching picture to give a rough idea about the flow.

  <script>
        $(document).ready(function () {
            $.ajax({
                url: '/Home/NewPopulation',
                dataType: "json",
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                data: {},
                success: function (data) {
                    var tr;
                    console.log(data);
                    for (var i = 0; i < data.length; i++) {
                        tr = tr + "<tr>";
                        tr = tr + "<td>" + data[i].PollSurveyName + "</td>";
                        tr = tr + "<td>" + data[i].PollSurveyDescription + "</td>";
                        tr = tr + "<td>" + data[i].CategoryName + "</td>";
                        tr = tr + "<td>" + data[i].StartDate + "</td>";
                        tr = tr + "<td>" + data[i].EndDate + "</td>";
                        tr = tr + "</tr>";
                    }
                    $('#tblPopulation').append(tr);
                    tblFormate();
                },
                error: function (xhr) {
                    alert('No Valid Data');
                }
            });

            function tblFormate() {
                var table = $('#tblPopulation').DataTable(
                    {
                        //"searching": false,
                        "lengthMenu": [[5, 10, 50, 100, 150, -1], [5, 10, 50, 100, 150, "All"]]
                    });
                //Apply the search
                table.columns().eq(0).each(function (colIdx) {
                    $('input', table.column(colIdx).header()).on('keyup change', function () {
                        table
                            .column(colIdx)
                            .search(this.value)
                            .draw();
                    });
                });
            }
        });
    </script>

    <thead>
                                        <tr style="font-weight:bold">
                                            <td>Poll/Survey Name</td>
                                            <td>Description</td>
                                            <td>Category Name</td>
                                            <td>Start Date</td>
                                            <td>End Date</td>
                                        </tr>
    </thead>

这是我的数据表的Java脚本代码和html代码，我想添加一个包含删除和编辑按钮的列。对于删除按钮，必须删除记录，对于编辑按钮，它将填充4个下拉列表，用于投票/调查名称，描述，类别名称，开始日期，结束日期。Attaching picture to give a rough idea about the flow.

Answer 1

手动方式

在表标题中添加2列

<tr style="font-weight:bold">
    <td>Poll/Survey Name</td>
    <td>Description</td>
    <td>Category Name</td>
    <td>Start Date</td>
    <td>End Date</td>
    <td>Edit</td>
    <td>Delete</td>
</tr>

同样添加逻辑以在数据循环中添加按钮

for (var i = 0; i < data.length; i++) {
    tr = tr + "<tr>";
    tr = tr + "<td>" + data[i].PollSurveyName + "</td>";
    tr = tr + "<td>" + data[i].PollSurveyDescription + "</td>";
    tr = tr + "<td>" + data[i].CategoryName + "</td>";
    tr = tr + "<td>" + data[i].StartDate + "</td>";
    tr = tr + "<td>" + data[i].EndDate + "</td>";

    tr = tr + "<td><input type='button' val='Edit' /></td>";
    tr = tr + "<td> <input type='button' val='Delete' /> </td>";

    tr = tr + "</tr>";
}

或者更好的方法是使用此link

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
            "targets": -1,  // Column index position
            "data": null,
            "defaultContent": "<button>Click!</button>" // Button detail
        } ]
    } );

    // Handle button click event
    $('#example tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        alert( data[0] +"'s salary is: "+ data[ 5 ] );
    } );
} );

在数据表中添加删除和编辑按钮

1 个答案: