Add Row for DataTables api does not work as specified.

joeller

I am working with the DataTables api Add Row. I entered the following from the example page http://datatables.net/examples/api/add_row.html

     <asp:LinkButton ID="addRow" runat="server">Add New Row</asp:LinkButton>
        <table id=example class=display cellSpacing=0 width="100%"> 
            <thead> 
                <tr> 
                    <th>Column 1</th> 
                    <th>Column 2</th> 
                    <th>Column 3</th> 
                    <th>Column 4</th> 
                    <th>Column 5</th>
                </tr>
            </thead> 
            <tfoot>
                 <tr>
                      <th>Column 1</th>
                      <th>Column 2</th>
                      <th>Column 3</th>
                      <th>Column 4</th>
                      <th>Column 5</th>
                 </tr>
            </tfoot>
        </table>


<script type="text/javascript">

    $(document).ready(function () {
        debugger;
        var t = $('#example').DataTable({ "searching": false, "paging": false });
        var counter = 1;
        $('#addRow').on('click', function () {
            t.row.add([counter + '.1', counter + '.2', counter + '.3', counter + '.4', counter + '.5']).draw();
            counter++;
        }); // Automatically add a first row of data 
        $('#addRow').click();
    });

</script>

I have stepped through the document.ready function and no error was returned. Yet no row gets added. Here is the jsfiddle page http://jsfiddle.net/9bmL9/ which does not work even as well as it does in Visual Studio as it never loads the DataTable Library or the JQuery library.

tangerine

Your HTML is badly formed.

<table id=example class=display

needs to be

<table id="example" class="display"

joeller

New JSFiddle page http://jsfiddle.net/joeller/AUQF4/

joeller

@tangerine made change. No change in behavior.

Add New Row
Column 1 Column 2 Column 3 Column 4 Column 5
No data available in table
Column 1 Column 2 Column 3 Column 4 Column 5

Showing 0 to 0 of 0 entries
..

joeller

This is the HTML renderering when copied from F12.

<DIV id=example_wrapper class=dataTables_wrapper>
    <TABLE style="WIDTH: 100%" id=example class="display dataTable" role=grid aria-describedby=example_info cellSpacing=0 width="100%" jQuery111009176408762761203="11">
        <THEAD>
            <TR role=row>
                <TH style="WIDTH: 313px" class=sorting_asc tabIndex=0 aria-controls=example rowSpan=1 colSpan=1 aria-sort="ascending" aria-label="Column 1: activate to sort column ascending" jQuery111009176408762761203="7">Column 1</TH>
                <TH style="WIDTH: 313px" class=sorting tabIndex=0 aria-controls=example rowSpan=1 colSpan=1 aria-label="Column 2: activate to sort column ascending" jQuery111009176408762761203="13">Column 2</TH>
                <TH style="WIDTH: 313px" class=sorting tabIndex=0 aria-controls=example rowSpan=1 colSpan=1 aria-label="Column 3: activate to sort column ascending" jQuery111009176408762761203="18">Column 3</TH>
                <TH style="WIDTH: 313px" class=sorting tabIndex=0 aria-controls=example rowSpan=1 colSpan=1 aria-label="Column 4: activate to sort column ascending" jQuery111009176408762761203="23">Column 4</TH>
                <TH style="WIDTH: 313px" class=sorting tabIndex=0 aria-controls=example rowSpan=1 colSpan=1 aria-label="Column 5: activate to sort column ascending" jQuery111009176408762761203="28">Column 5</TH>
            </TR>
        </THEAD>
        <TFOOT>
            <TR>
                <TH rowSpan=1 colSpan=1>Column 1</TH>
                <TH rowSpan=1 colSpan=1>Column 2</TH>
                <TH rowSpan=1 colSpan=1>Column 3</TH>
                <TH rowSpan=1 colSpan=1>Column 4</TH>
                <TH rowSpan=1 colSpan=1>Column 5</TH>
            </TR>
        </TFOOT>
        <TBODY>
            <TR class=odd>
                <TD class=dataTables_empty vAlign=top colSpan=5>No data available in table</TD>
            </TR>
        </TBODY>
    </TABLE>
    <DIV id=example_info class=dataTables_info role=status aria-live=polite>Showing 0 to 0 of 0 entries</DIV>
</DIV>

kirkjerk

Interesting. I was running into a similar problem (see http://datatables.net/forums/discussion/21543/infinite-scrolling-vs-virtual-scrolling#latest ) -- stepping through the code, it looks like when i append, aiDisplay (an api internal variable that looks like its used to handle sorting and filtering maybe?) is not being updated -- It being a zero length array seems to be why the data that got added to aoData (an api internal variable that holds the rawish data, and seems to be growing as expected)

tangerine

@kirkjerk: I don't see the similarity.

@joeller: the "add row" example in here works perfectly, and the code is quite simple. Are you sure you copied it exactly?
Incidentally, I don't know asp - are you happy with that <asp:LinkButton stuff?

kirkjerk

followup: when I copy and paste the example from the page, it works for me:
http://kirk.is/temp/datatables/append.html

joeller

@tangerine Yes. I did a copy and paste of the script and the HTML. The asp Linkbutton is rendered as an <a> element. So on a hunch I replaced it with a input type = "button". That worked. It was my understanding of JQuery that if you assigned a click event handler to any element, and then called that click event explicitly in code that it would response as if being clicked even it the element normally does not support a click event. (I done that with td elements.) However, it did not even do that.

Unfortunately it does not do what I wanted i.e. add a blank row that could be edited like on an MS Access table.

joeller

Actually I am able to get it to add a blank row, by rendering the data as empty Strings. Now I need to make it editable.

kirkjerk

the similarity was "rows not being added" behavior.
My issue turned out to be in our dt wrapper code; we had this thing with filters that used for(var i in someArray) rather than for(var i = 0; i < someArray.length; i++) and then our legacy code includes prototype.js that adds an "each" key / value to basic arrays. I had to wade through a ton of DT code to figure that out, though.