Question

我有一个页面使用以下代码加载jtable (here)：

<script type="text/javascript">
        $(document).ready(function () {
            $('#EventTypeTableContainer').jtable({
                title: 'Table of EventType',
                actions: {
                    listAction: 'Admin/GetEventTypeList',
                    createAction: 'Admin/CreateEventType',
                    updateAction: 'Admin/UpdateEventType',
                    deleteAction: 'Admin/DeleteEventType'
                },
                fields: {
                    EventTypeId: {
                        key: true,
                        list: true
                    },
                    ColourCode: {
                        title: 'Event Color',
                        width: '25%',
                        list: true
                    },
                    EventTypeName: {
                        title: 'Event Type',
                        width: '50%',
                        list: true
                    },
                    isSystemEventType: {
                        title: 'Modify/Delete',
                        width: '25%',
                        list: true,
                        create: false,
                        edit: true
                    }
                }
            });
            $('#EventTypeTableContainer').jtable('load');
        });
    </script>

表格加载，并显示“No Data Available！”。它确实调用listAction，它返回此JSON字符串（作为示例）：

{
   "Result":"OK",
   "Record":[
      {
         "EventTypeID":1,
         "EventTypeName":"Quiz",
         "colourCode":"#FA5858",
         "isSystemEventType":false
      },
  {
     "EventTypeID":2,
     "EventTypeName":"Assignment",
     "colourCode":"#58FA58",
     "isSystemEventType":false
  },
  {
     "EventTypeID":3,
     "EventTypeName":"MidTerm",
     "colourCode":"#5858FA",
     "isSystemEventType":false
  },
  {
     "EventTypeID":4,
     "EventTypeName":"Exam",
     "colourCode":"#FA58F4",
     "isSystemEventType":false
  }
]
}

我正在初始化表格或数据格式的方式有什么问题吗？

Answer 1

jtable考虑区分大小写，因此请确保您的列与您在结果中列出的内容具有完全相同的名称。表中有两列名称错误。

<script type="text/javascript">
    $(document).ready(function () {
        $('#EventTypeTableContainer').jtable({
            title: 'Table of EventType',
            actions: {
                listAction: 'Admin/GetEventTypeList',
                createAction: 'Admin/CreateEventType',
                updateAction: 'Admin/UpdateEventType',
                deleteAction: 'Admin/DeleteEventType'
            },
            fields: {
                EventTypeID: {
                    key: true,
                    list: true
                },
                colourCode: {
                    title: 'Event Color',
                    width: '25%',
                    list: true
                },
                EventTypeName: {
                    title: 'Event Type',
                    width: '50%',
                    list: true
                },
                isSystemEventType: {
                    title: 'Modify/Delete',
                    width: '25%',
                    list: true,
                    create: false,
                    edit: true
                }
            }
        });
        $('#EventTypeTableContainer').jtable('load');
    });
</script>

Answer 2

在您的JSON响应中，“记录”字段需要根据文档命名为“记录”：http://jtable.org/ApiReference#act-listAction

（Jquery）Jtable加载问题

2 个答案: