0

我们需要在基于Umbraco的 Web 应用程序中为后台提供数据表功能，因此我们决定使用JqDataTable。JqDataTable 工作正常，我们面临的唯一问题是当我们从一个内容节点或选项卡切换到另一个时，表内的数据未加载。一旦我们更改分页或刷新浏览器，就会呈现数据。

我的 Umbraco 版本是7.9.1，我的 JqWidget 版本是8.3.2

有关更多详细信息，我正在使用 Ajax 调用来呈现 JqDataTable 中的数据。

这是一些代码：

//Div inside HTML
<div id="jqtable"></div>

// Javascript code
<script type="text/javascript">
$(document).ready(function () {

    GetMembers(function (returnValue) {           
        RenderDatatable(returnValue);
    });       
});

function GetMembers(callback) {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/Members/GetMembers",
        success: function (response) {               
            var members = JSON.parse(response.members);
            callback(members);                
        },
        error: function (e) {
            console.log(e.message);
            alert(e.message);
        }
    });
} 


function RenderDatatable(members) {
    var memberSource =
    {
        dataType: "array",
        dataFields: [
            { name: 'Id', type: 'int' },
            { name: 'FirstName', type: 'string' },
            { name: 'MiddleName', type: 'string' },
            { name: 'LastName', type: 'string' },
            { name: 'Email', type: 'string' },
            { name: 'Contact', type: 'string' },                
            { name: 'Lastedited', type: 'date' }
        ],
        id: 'Id',
        localData: members
    };
    var dataAdapter = new $.jqx.dataAdapter(memberSource);

    $("#jqtable").jqxDataTable(
    {               
            width: 630,
            theme: 'metro',
            pageable: true,
            sortable: true,                
            filterable: true,
            showToolbar: true,
            altRows: true,                
            pagerButtonsCount: 8,
            toolbarHeight: 35,
            source: dataAdapter,
            columns: [
                { text: 'ID', editable: false, align: 'center', dataField: 'Id', width: 80 },
                { text: 'First Name', dataField: 'FirstName', align: 'center', width: 200 },
                { text: 'Middle Name', dataField: 'MiddleName', align: 'center', width: 200 },
                { text: 'Last Name', dataField: 'LastName', align: 'center', width: 200 },
                { text: 'Email', dataField: 'Email', align: 'center', width: 200 },
                { text: 'Contact', dataField: 'Contact', align: 'center', width: 200 },
                { text: 'Last Edited', editable: false, dataField: 'Lastedited', align: 'center', cellsFormat: 'dd/MM/yyyy' }
            ]
        });
}

4

0 回答 0