YUI3 DataTable add two rows

214 Views Asked by At

I am trying to modify the the YUI dataTable to add rows dynamically after the dataTable is created but instead of adding one new row it adds two.

My code:

 var index = 0;

YUI({
    filter: 'RAW'
}).use([
        'node',
        'io',
        'datasource',
        'json-parse',
        'json-stringify',
        'datatable',
        'datatable-sort',
        'datatable-mutable',
        'datatable-scroll',
        'datatable-paginator',
        'model-list'
    ],
    function(Y) {
        var dataTableColumns = [
            {
                key: 'id',
                label: '#'
            },
            {
                key: 'name',
                label: 'Name',
                allowHTML: true,
                formatter: function (valueObject) {
                    return valueObject.name;
                }
            }
        ];

        var dataTable = new Y.DataTable({
                width: "100%",
                columns: dataTableColumns,
                plugins: [{
                    cfg: {
                        highlightRange: false
                    },
                    fn: Y.Plugin.DataTableHighlight
                }]
            }
        );

        dataTable.render('#dataTableDiv');

        var dataSource = new Y.DataSource.IO({
            source: "/localhost/data/"
        });

        dataSource.plug({fn: Y.Plugin.DataSourceJSONSchema, cfg: {
            schema: {
                resultFields: [
                    {key: "id"},
                    {key: "name"}
                ]
            }
        }});

        dataTable.plug(Y.Plugin.DataTableDataSource, {
            datasource: dataSource
        });

        dataTable.datasource.load();

        Y.one("#addButton").on('click', function (event) {
            index++;

            var rowData = {
                id: index,
                name: "Test row"
            };

            dataTable.addRow(rowData, {index: 0});
        });
    }
);

So After DataTable is created I have: enter image description here

And after dataTable.addRow(rowData, {index: 0}); I have:

enter image description here

0

There are 0 best solutions below