MVC 4，jTable 2.3，表数据不会在第二次 (+) 调用时重建

Question

对第一个表的选择会导致第二个表发生变化。但是，更改只发生一次。任何后续调用都会生成有效的 JSON，但 html 保持不变。

控制器：

[HttpPost]
    public JsonResult M1List(int jtStartIndex, int jtPageSize, string jtSorting)
    {
        try
        {
            List<tblM> m1 = new DataHelper().GetM1(jtSorting, jtPageSize, jtStartIndex);
            int m1Count = new DataHelper().Getm1Count();

            return Json(new { Result = "OK", Records = m1, TotalRecordCount = m1Count });
        }
        catch (Exception ex)
        {
            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }

    [HttpPost]
    public JsonResult M2List(int mId, int jtStartIndex, int jtPageSize)
    {
        try
        {
            List<ViewM1A> m2 = new DataHelper().GetM2ForM1(mId.ToString(), "mId", jtPageSize, jtStartIndex);
            int m2Count = new DataHelper().GetM2ForM1Count(mId.ToString());

            return Json(new { Result = "OK", Records = m2, TotalRecordCount = m2Count });
        }
        catch (Exception ex)
        {
            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }

JS：

$(document).ready(function () {
    $('#m1TC').jtable({
        paging: true,
        sorting: true,
        defaultSorting: 'Name ASC',
        selecting: true, //Enable selecting
        multiselect: false, //Allow multiple selecting
        actions: {
            listAction: '@Url.Action("M1List")'
        },
        fields: {
            mId: {
                title: 'Id'
            }
        },
        selectionChanged: function () {
            var $selectedRows = $('#m1TC').jtable('selectedRows');
            $selectedRows.each(function () {
                var record = $(this).data('record');
                buildM2Table(record.mId);
            });
            $('#m2TC').jtable('load');
        }
    });
    $('#m1TC').jtable('load');
});

function buildM2Table(actionUrl) {
    $('#m2TC').jtable({
        paging: true,
        sorting: true,
        defaultSorting: 'Name ASC',
        selecting: true, //Enable selecting
        multiselect: true, //Allow multiple selecting
        selectingCheckboxes: true, //Show checkboxes on first column
        actions: {
            listAction: '/Connections/M2List?mId=' + actionUrl
        },
        fields: {
            FullName: {
                title: 'Name'
            },

        },
        selectionChanged: function () {
            var $selectedRows = $('#m2TC').jtable('selectedRows');

            $('#SelectedRowList').empty();
            if ($selectedRows.length > 0) {
            } else {
                $('#SelectedRowList').append('No row selected! Select rows to see here...');
            }
        }
    });
}

html:

<div id="m1TC"></div>
<div id="m2TC"></div>

Answer 1

在 'var record = $(this).data("record");' 后面加上这段代码解决：

$('#m2TC').remove();
$('#m1TC').after('<div id="m2TC"></div>');