时间戳

首页 > 解决方案 > 将带有参数的数据表重新加载到 ajax 调用

asp.net-mvc - 将带有参数的数据表重新加载到 ajax 调用

问题描述

大家好，我有一个列出特定“节点”行的项目。每个节点都可以拥有该节点的父节点。想想简单的层次结构模式。

出色地。我想要发生的是，单击该行时，我希望它突出显示，但是双击一行时，我希望表刷新但使用新数据。数据将基于谁拥有此 ID 的父级。 

<div class="table table-striped table-bordered">
    <a href="" id="parentIDLink">View Parent</a>
    <input id="parentID" name="ParentID" value="" type="hidden">
    <table id="myDatatable">
        <thead>
            <tr>
                <th>NodeID</th>
                <th>Name</th>
                <th>Desc</th>
                <th>Active</th>
            </tr>
        </thead>
    </table>
</div>

<script src="~/lib/DataTables-1.10.16/js/jquery.dataTables.js"></script>
<script src="~/lib/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>

<script>

    $(document).ready(function () {
        var oTable = $('#myDatatable').DataTable({
            "ajax": {
                "url": '/Node/GetNodes?pParentID=' + $('#parentID').val(),
                "type": "get",
                "datatype": "json"
            },
            "autoWidth": true,
            "columns": [
                {
                    "data": "NodeID",
                    "render": function (pID) {
                        return '<input id="NodeID" value="'+pID+'" disabled/>';
                    }
                },
                { "data": "Name", "width": "100%" },
                { "data": "Desc", "width": "100%" },
                {
                    "data": "IsActive", "width": "50px",
                    'searchable': false,
                    "render": function (pActive) {
                        var status = pActive ? 'checked="checked"' : "";
                        return '<input class="CheckBox" disabled type="checkbox" ' + status + '" />';
                    }
                }               
            ]
        });

        $('#myDatatable tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                oTable.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');

                $('#parentID').val($('td #NodeID', this).val());
            }
        });

        $('#myDatatable tbody').on('dblclick', 'tr', function() {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                oTable.$('tr.selected').removeClass('selected');
                $('#parentID').val($('td #NodeID', this).val());

                oTable.ajax.reload(); // DOESN"T DO WHAT I EXPECT
            }
        });

        $("#parentIDLink").click(function () {
            oTable.ajax.reload();
        });
    });


</script>

以上是该页面的html。下面是调用来绘制列表的 MVC 代码。如果 id 为 null，则基本上抓取所有节点，但如果值不为 null，则抓取具有特定父节点的节点

public ActionResult GetNodes(string pParentID)
        {
            if (pParentID == null || pParentID == "null" || pParentID == string.Empty)
                return base.Json(new { data = m_Context.Nodes.ToList() }, 
                    new JsonSerializerSettings());
            else
                return base.Json(new { data = m_Context.Nodes.Where(m => m.NodeID == pParentID).ToList() }, 
                    new JsonSerializerSettings());;

        }

我会以错误的方式解决这个问题吗？

标签： asp.net-mvcdatatable

解决方案

创建一个函数，根据您的选择重新加载您的数据。在双击事件处理程序中，调用该函数

function LoadDataTable() {
    $.ajax({
        type: "POST",
        url: "/Node/GetNodes",
        data: { pParentID: $('#parentID').val() },
        success: function(result){
            oTable.clear().draw();
            oTable.rows.add(result).draw();
        }
    });
}

$('#myDatatable tbody').on('dblclick', 'tr', function() {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        oTable.$('tr.selected').removeClass('selected');
        $('#parentID').val($('td #NodeID', this).val());
        LoadDataTable();
    }
});

推荐阅读