How to add record to jTable?

May I know how to add a record to jtable from json or array?

I can find only two methods from API Reference

I tried both, but not work, it always shows "No data available!"

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jqueryui/ui/jquery-ui.js"></script>
<script src="jquery.jtable.js"></script>

<link rel="stylesheet" type="text/css" href="themes/basic/jtable_basic.css" />
<script>
jQuery(document).ready
(
    function()
    {
        var jt=$('#jt').jtable
        (
            {
                title: 'this is title',
                fields: {
                    a: {
                        title: 'a'
                    },
                    b: {
                        title: 'b'
                    }
                }
            }
        );
        jt.jtable('load',{a:'aaa',b:'bbb'});

        jt.jtable('addRecord', {
            record: {
                a:'aaa',b:'bbb'
            }
        });
    }
);
</script>
</head>
<body>

<div id="jt">

</div>

</body>
</html>

Solution

load method is used when you want to retrieve data to your table from server. If you want to add data by hand then addRecord is the right method to use. However: by default, jtable tries to add data also to server. If you don't have your server configured properly, then addRecord may fail too.

In this, if you just want to add data manually to the client side, provide addRecord with clientOnly parameter:

$('#jt').jtable('addRecord', {
   record: {
      a:'aaa',b:'bbb'
   },
   clientOnly: true
});

Full working demo: JSFIDDLE