MR.JsonTable

(A very simple, very small jquery plugin: HTML Table from JSON data with paging sorting and hideable columns)

This is my very first jquery plugin so be gentle!

My requirments

• Table will show a basic json data object (no nested objects)
• Able to pass information about what columns to show and what data type the data is
• Ability to sort the colums of four data types:
  • string
  • int
  • float
  • datetime (must be able to parse to javascript date object)
• Ability to have more than one table on the page
• Ability to have sortable and unsortable colums
• Ability to show and hide columns
• Ability to load a column as hidden
• Minimal css and images
• Be as small in filesize as I can make it whilst still being readable (the unminified version at least)
• Ability to page
• Ability to set a page size

So here it is at a whopping minified 2.80KB! :D

        <div class="mrjsontable"></div>
        <script>
            $(function () {
                $(".mrjsontable").mrjsontable({
                    tableClass: "my-table",
                    pageSize: 9,
                    columns: [
                        new $.fn.mrjsontablecolumn({
                            heading: "Name",
                            data: "name"
                        }),
                        {
                            heading: "Age",
                            data: "age",
                            type: "int",
                            sortable: true
                        },
                        new $.fn.mrjsontablecolumn({
                            heading: "Height",
                            data: "height",
                            type: "float",
                            sortable: true,
                            starthidden: true
                        }),
                        new $.fn.mrjsontablecolumn({
                            heading: "Weight",
                            data: "weight",
                            type: "int",
                            sortable: false,
                        }),
                        new $.fn.mrjsontablecolumn({
                            heading: "DOB",
                            data: "dob",
                            type: "datetime"
                        })
                    ],
                    data: [
                        { name: "Bob", age: 14, height: 14.2, weight: 84, dob: "1984-04-17T14:48:00" },
                        { name: "Bill", age: 24, height: 16.6, weight: 96, dob: "Mon, 16 April 1984 14:48:00 GMT" },
                        { name: "Barry", age: 18, height: 12.9, weight: 73, dob: "April 15, 1984" },
                        { name: "Barney", age: 56, height: 14.2, weight: 84, dob: "1984-04-14T14:48:00" },
                        { name: "Bart", age: 3, height: 16.6, weight: 96, dob: "Mon, 13 April 1984 14:48:00 GMT" },
                        { name: "Bartholomew", age: 54, height: 12.9, weight: 73, dob: "April 12, 1984" },
                        { name: "Ben", age: 52, height: 14.2, weight: 84, dob: "1984-04-11T14:48:00" },
                        { name: "Benedict", age: 78, height: 16.6, weight: 96, dob: "Mon, 10 April 1984 14:48:00 GMT" },
                        { name: "Benjamin", age: 67, height: 12.9, weight: 73, dob: "April 9, 1984" },
                        { name: "Bernard", age: 34, height: 14.2, weight: 84, dob: "1984-04-08T14:48:00" },
                        { name: "Blake", age: 54, height: 16.6, weight: 96, dob: "Mon, 7 April 1984 14:48:00 GMT" },
                        { name: "Boris", age: 66, height: 12.9, weight: 73, dob: "April 6, 1984" },
                        { name: "Brad", age: 88, height: 14.2, weight: 84, dob: "1984-04-05T14:48:00" },
                        { name: "Braden", age: 90, height: 16.6, weight: 96, dob: "Mon, 4 April 1984 14:48:00 GMT" },
                        { name: "Bradley", age: 103, height: 12.9, weight: 73, dob: "April 3, 1984" },
                        { name: "Brody", age: 16, height: 14.2, weight: 84, dob: "1984-04-02T14:48:00" }
                    ]
                });
            });
        </script>
                

Instructions

1. This plug in requires jQuery. You can download jquery from here.
2. Download the mrjsontable files here.
3. Place the files in the root of you website.
4. Add links to the css and javascript files in the head section of your html page

           <script src="/mrjsontable/scripts/mrjsontable.js"></script>
           <link href="/mrjsontable/css/mrjsontable.css" rel="stylesheet" />
           

5. Make a div in your HTML where you would like the table to appear and give it a class or ID so you can reference it later eg:

           <div id="mydiv"></div>
           

6. Initiate the mrjsontable object passing in the array of json data that you want to display and providing information on the columns

   Information on columns can be passed using a standard json object or a $.fn.mrjsontablecolumn({}); object. both version are used below

           <div id="mydiv"></div>
           <script>
               $(function () {
                   $("#mydiv").mrjsontable({
                       columns: [
                           {
                               heading: "Can be any text for the heading of this column",
                               data: "json_data_field_name", // see how this links to the json object further down
                               type: "string", // can be string, int, float, datetime
                               sortable: true, // is the field sortable (optional defaults to false)
                               starthidden: true // should the field be hidden when loaded (optional defaults to false)
                           },
                           new $.fn.mrjsontablecolumn({
                               heading: "Name",
                               data: "name"
                           }),
                           {
                               heading: "Another heading",
                               // etc...
                           }
                       ],
                       data: [
                           {
                               yourdata: yourvalue,
                               json_data_field_name: value //in this example the first column is looking for this field specified in the data property,
                               name: name_value // in this example the second column is looking for this value
                           },
                           {
                               yourdata: yourvalue,
                               // etc...
                           }
                       ]
                   });
               });
           </script>
           

7. That's it, enjoy using Mr.JsonTable!

As always, if you have any questions or queries then feel free to ask someone else first :D

Big thanks

A big thanks to SyntaxHighlighter 3.0.83 for making my code look pretty

Donate or follow

If you feel the urge to buy me a beer or follow me on twitter here are some buttons!