DataTables: Adding a row dynamically

Question

I am binding 5 records in repeater

 <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
                <table id="example" class="table table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th> <h3 style="font-size:24px;margin-top: 20px;margin-bottom: 20px;  margin-left: 40px;"><b>Teacher Posts</b></h3></th>
                        </tr>
                    </thead>

                    <tbody id="examplecontent">
            </HeaderTemplate>
            <ItemTemplate>

                <tr>
                    <td>

                        <div class='col-md-12'>


                            <div class='col-xs-10'>
                                <div class='media'>
                                    <div class="pull-left">
                                        <a href='#'>

                                            <img src='<%#Eval("Picture") %>' style='height: 100px; width: 100px;' runat="server" />

                                        </a>
                                    </div>
                                    <div class="p-lg-left media-body">
                                       <h4 class="oProfileTileTitle media-heading">

                                                <a href='<%#Eval("Teacher_id","~/Pages/Teacher/TProfile.aspx?recid={0}") %>' runat="server" class="jsShortName" title="Nicolas Baud"><%#Eval("TeacherName") %></a>


                                            </h4>
                                                 <p class="jsTitle lead ng-binding m-md-bottom"><%#Eval("Title") %></p>

                                                <span class="glyphicon glyphicon-map-marker"></span><strong class="jsCountry"><%#Eval("CountryAdd") %></strong><span class="text-muted">
                            -
                            <span class="jsLastActivity"><%#Eval("Created_Date") %>
                            </span>
                                                    -
                            <span class="jsTests">Class: <span class="btn-link fw-200"><%#Eval("class") %></span></span>
                                                    -
                            <span class="jsPortfolios">Subject: <span class="btn-link fw-200"><%#Eval("SubName") %></span></span></span>

                                            <p class="oDescription ng-isolate-scope">
                                                <!-- ngIf: !open -->
                                                <span class="ng-binding ng-scope"><%#Eval("Description") %></span>
                                            </p>


                                    </div>
                                </div>
                            </div>

                        </div>


                    </td>


                </tr>

            </ItemTemplate>
            <FooterTemplate>
                </tbody>
        </table>
            </FooterTemplate>


        </asp:Repeater>

Then after 1 min I am fetching 5 more records using jQuery Ajax and append these record in <tbody>.

After that:

$("#examplecontent").append(content);

So it works fine but the problem is that I am using DataTables and the search bar of DataTables doesn't work after Ajax fetch.

Users are unable to search data that was fetched using Ajax.

Screenshot 1: example1

Screenshot 2: example1

Gyrocode.com · Accepted Answer · 2015-06-10 19:17:06Z

1

Use row.add() to add rows to the table:

$('#example').DataTable()
   .row
   .add(['<b>Sample content here</b>'])
   .draw();

$('#example').DataTable() will return DataTables API instance.

row.add() accepts array or object consisting of data for every column. Since you have only one column, I put one array element '<b>Sample content here</b>' demonstrating that you can use string containing HTML as well.

edited Jun 10, 2015 at 19:17

answered Jun 10, 2015 at 17:49

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user3552739 Over a year ago

can i add any thing in add method?

user3552739 Over a year ago

means i have a new tr so can i do that var datatable = $('#example').DataTable(); after fetching record :- datatable.row.add(['<tr>..</tr>']).draw(); ?

Gyrocode.com Over a year ago

@user3552739, add() accepts array or object consisting of data for every column. Since you have only one column, I put one array element '<b>Sample content here</b>' demonstrating that you can use string containing HTML as well.

user3552739 Over a year ago

dataTable.row.add(con).draw();

user3552739 Over a year ago

can you please tell last thing? i am doing datatable.row.add(con).draw(); where datatabe is api of datatable and con is the html variable but it's not working

|

Collectives™ on Stack Overflow

DataTables: Adding a row dynamically

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related