Tabulator 4.1 - данные не заполняются в таблице в IE 11 - PullRequest
Новая
       5

Tabulator 4.1 - данные не заполняются в таблице в IE 11

0 голосов
/ 11 февраля 2019

Данные не заполняются внутри таблицы.Но когда я открываю консоль или выполняю операцию addRow, данные обновляются.Ниже приведен код: 

$(document).ready(function() {
$.get("./resources/json/result.json", function(data, status) {
    createEmpDetailTbl(JSON.parse(data));
});

function createEmpDetailTbl(jsonData) {
table = new Tabulator("#emp-detail-table", {
    data : jsonData,
    height : "100%",
    layout : "fitColumns",
    tooltips:true,
    tooltipsHeader: true,
    addRowPos:"top",
    pagination : "local",
    paginationSize : 10,
    columns : [ {
        title : "Actions",
        field : "username",
        //sorter : "string",
        width : 100,
        frozen : true,
        headerSort : false,
        formatter : actionRowIcon,
        cellClick : function(e, cell) {
            //console.log("Event Source: "+e.srcElement.id);
            //console.log("Cell Value: "+cell.getValue());
            if('del' == e.srcElement.id){
                var row = cell.getRow();
                row.delete().then(function(){
                    //run code after row has been deleted
                    alert('Row Deleted Successfully');
                    $.ajax({
                        url: "/YourController",
                        cache: false,
                        dataType: "json",
                        success: function(data) {
                            //$("#content").html(data);
                        }
                    });
                })
                .catch(function(error){
                    //handle error deleting row
                });
                var rowIndex = row.getIndex();
                //console.log('Row Data: '+row);
                //console.log('Row Position: '+row.getPosition(true));
            }
        }
    }, {
        title : "Employee ID",
        field : "username",
        //sorter : "string",
        width : 120,
        align : "left",
        headerSort : false,
        editor:"input",
        frozen : true
    }, {
        title : "Full Name",
        field : "fname",
        //sorter : "string",
        width : 120,
        align : "left",
        headerSort : false,
        frozen : true
    }, {
        title : "Email Address",
        field : "email",
        //sorter : "string",
        width : 170,
        align : "left",
        headerSort : false,
        cellClick : function(e, cell) {
            //console.log("cell click")
        },
    }, {
        title : "OUC",
        field : "ouc",
        //sorter : "string",
        width : 70,
        align : "left",
        headerSort : false
    }, {
        title : "LOB",
        field : "lob",
        width : 70,
        align : "left",
        headerSort : false,
        //sorter : "string"
    }, {
        title : "Type of Redundancy",
        field : "tyRedun",
        //sorter : "string",
        width : 120,
        align : "left",
        headerSort : false,
    }, {
        title : "Type of Notice Period",
        field : "tyNoticePeriod",
        //sorter : "string",
        width : 80,
        align : "left",
        headerSort : false
    }, {
        title : "Notice Period",
        field : "noticePeriod",
        //sorter : "string",
        width : 70,
        align : "left",
        editor:"select", 
        editorParams:{values:["1 Month", "2 Month", "3 Month", "4 Month"]},
        headerSort : false
    }, {
        title : "Proposed Exit Date",
        field : "proExitDate",
        //sorter : "date",
        width : 80,
        align : "left",
        headerSort : false
    }, {
        title : "Consultation Manager UIN",
        field : "conManagerUin",
        width : 80,
        align : "left",
        headerSort : false
        //sorter : "number",
    }, {
        title : "Consultation Date",
        field : "conDate",
        //sorter : "date",
        width : 80,
        align : "left",
        headerSort : false
    }, {
        title : "Pension Contribution",
        field : "pensionContri",
        //sorter : "number",
        width : 100,
        align : "left",
        headerSort : false
    }, {
        title : "Car Cash Allowance",
        field : "carCashAllowance",
        //sorter : "number",
        width : 100,
        align : "left",
        headerSort : false
    } ],
    renderStarted:function(){
        $('#loading').show();
    },renderComplete:function(){
        $('#loading').hide();
    },
    cellEdited:function(row){

        //row - row component
        //console.log('Changed......'+row.getData().username);
        $.ajax({
            type: 'GET',
            //url: './resources/json/employee.json',
            url: projectOptions.restUrl+'employee/'+row.getData().username,
            dataType:'text',
            contentType: 'application/json; charset=utf-8',
            beforeSend:function(){
                $('#loading').show();
            },
            success:function(response) {
                if(response != ""){
                    var data=[];
                    data.push(response);
                    console.log(JSON.parse(data));
                    //table.updateData(JSON.parse(data));
                    table.addData(JSON.parse(data));
                    $('.alert').hide();
                } else{
                    $('#error-txt').text('').text('Employee data not found.');
                    $('.alert').show();
                }

            },
            complete:function(){
                $('#loading').hide();
            },
            error:function(err, xhr, msg){
                alert(err+"-------------------"+xhr);
            }
        });

    }
});
}

JSON: 

[{
"dn": null,
"username": "23456789",
"password": null,
"displayName": null,
"fname": "John",
"lname": "Smith209884",
"email": "x.x@wer.com",
"ouc": "TBS23B",
"lob": "wer",
"jobcode": "STST05",
"employer": "NO Plc",
"ldg": "GB LDG",
"origHireDate": "1980-09-01",
"serviceDate": "1980-09-01",
"terminationDate": null,
"authorities": [],
"accountNonExpired": true,
"accountNonLocked": true,
"credentialsNonExpired": true,
"enabled": true,
"timeBeforeExpiration": 2147483647,
"graceLoginsRemaining": 2147483647,
"name": "John Smith209884"
}]

1 Ответ

0 голосов
/ 11 февраля 2019

Нет необходимости делать запрос GET самостоятельно, Tabulator может сделать это за вас.

Вместо использования свойства data используйте ajaxURL и передайте ему URL: 

table = new Tabulator("#emp-detail-table", {
    ajaxURL: "./resources/json/result.json",
    height : "100%",
    layout : "fitColumns",
...
});

Если таблица не загружает данные, она предполагает, что она в неправильном формате, вы проверили журналы консоли?Табулятор оставит в логах сообщение, объясняющее, почему он не может загрузить данные.он будет ожидать массив объектов: 

[
    {...},
    {...},
]
...