animate.table
Table updated with animation

Append and insert row


    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/underscore-min.js"></script>
    <script type="text/javascript" src="../js/animate.table.js"></script>

    <link rel="stylesheet" type="text/css" href="../style/animations.css">
    <link rel="stylesheet" type="text/css" href="../style/ultra.css">
    <link rel="stylesheet" type="text/css" href="../style/theme/red.css">

Init with the options

    
        var options = {
            headers: ["Exercises","Committed/Uncommitted","Accuracy"],
            headerWidth:["300px", "200px", "80px"],
            rows: [
                {
                    id: "1",
                    name: "English exam 5.1 - test",
                    commited: 10,
                    total: 12,
                    right: 8
                },
                {
                    id: "2",
                    name: "English exam 5.1 - multiple choice",
                    commited: 7,
                    total: 12,
                    right: 5
                },
                {
                    id: "3",
                    name: "English exam 5.3 - multiple choice",
                    commited: 5,
                    total: 5,
                    right: 4
                },
                {
                    id: "4",
                    name: "Grammar - assorted questions 1",
                    commited: 7,
                    total: 12,
                    right: 7
                }
            ],
            page: {
                current: 1,
                per: 8
            },
            rowTemplates: [
                "{{name}}","{{commited}}/{{total}}","{{Math.floor(100*right/commited)}}%"
            ],
            pageEntranceAnimation: "pt-page-scaleUp",
            pageExistAnimation: "pt-page-rotatePushLeft"
        };

        function appendRow(index) {
            var ultraTable = $("#mytable").animatedTable();
            ultraTable.insertRow( {
                id: "4",
                name: "Grammar - assorted questions 1",
                commited: 7,
                total: Math.floor(Math.random()*100),
                right: 7
            }, index);
        }