CODEWITHSUNDEEP
jqueryjsonasp.net-mvc
user2205196
user2205196

Reputation: 113

(Jquery) Jtable loading problems

I have a page loading a jtable (here) using the following code:

<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>

The table loads, and displays "No Data Available!". It does call the listAction though, which returns this JSON string (as an example):

{
   "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
  }
]
}

Is there anything wrong with the way I'm initializing the table, or the format of the data?

Upvotes: 0

Views: 2308

Answers (2)

meddlingwithfire
meddlingwithfire

Reputation: 1437

In your JSON response, the "Record" field needs to be named "Records" per the documentation: http://jtable.org/ApiReference#act-listAction

Upvotes: 0

nquoctuan
nquoctuan

Reputation: 11

jtable consider case-senstive, so make sure that your column has exactly name with what you listed on the result. There is two columns with wrong name in the table.

<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>

Upvotes: 1

Related Questions