MR.JsonTable

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

Fork me on GitHub

This is my very first jquery plugin so be gentle!

My requirments

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

View code for this example

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!

Follow @Matching_Radar