How to add button for each row using for loop in datatables by ajax and jquery

Question

i want to add buttons for each row using ajax function...I code something but is not work well.. Buttons move out of the table and view all buttons in the bottom if the page.I want to add these buttons to datatables row... I want to add abc buttons one by one to [object Object] feild using for loop

ajax and jquery cord

<script>
        $(document).ready(function () {
            $("#searchArea").hide();
            var uID = $("#userName").val();

            var tableProduct = $('#dataTbl').DataTable({
                "bSort": true
                , "oLanguage": {"sZeroRecords": "", "sEmptyTable": ""}
            });
            $.ajax({
                type: 'GET',
                url: '${pageContext.request.contextPath}/restservice/App50/' + uID,
                success: function (result) {
                    var jString = JSON.stringify(result);
                    var jdata = JSON.parse(jString);

                    for (var x = 0; x < jdata.length; x++) {
                        var pa = $('#aaa');
                        var td1 = jdata[x].snumber;
                        var td2 = jdata[x].date;
                        var td3 = jdata[x].slsNo + " in " + jdata[x].slsiUnit;
                        var td4 = jdata[x].productDesc;
                        var td5 = jdata[x].status;
                        var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');
                        var td7 = "jdata[x].hsCode";
                        var td8 = "jdata[x].hsCode";
                        tableProduct.row.add([td1, td2, td3, td4, td5, td6, td7, td8]).draw(true);
                    }
                }

            });

        });
    </script>

jsp cord

<body>
        <div id="bootstrapCssTest" class="hidden"></div>
        <div id="bootstrapCssTest" class="hidden"></div>

        <div class="container">
            <div class="row headerRow1">
                <div class="col-md-12">
                    <jsp:include page="template/banner.jsp"/>
                </div>
            </div>
            <div class="row">
                <div class="authheader">
                    <%@include file="template/message.jsp" %>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                    <jsp:include page="template/header.jsp"/>
                </div>
                <div class="col-xs-12 col-sm-8 col-md-9 col-lg-9">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="well lead">List of Applications</div>
                        </div>
                    </div>
                    <div class="row">
                        <input type="hidden" id="userName" value="${userID}"/>
                        <input type="hidden" id="recentView" value="1"/>
                        <div class="panel panel-default">

                            <div id="ribbon">Search - <p id="viewSearchCategory" style="display: inline-block" >View Recent 50 Applications</p></div>
                            <div id="searchArea" class="well ">
                                <div class="row">
                                    VIEW RECENT
                                    <select id="viewNumbers" name="viewNumbers">
                                        <option value="50">50</option>
                                        <option value="100">100</option>
                                        <option value="150">150</option>
                                        <option value="200">200</option>
                                        <option value="500">500</option>
                                        <option value="750">750</option>
                                        <option value="1000">1000</option>
                                    </select>
                                    APPLICATIONS
                                </div>
                            </div>
                            <!-- Default panel contents -->
                            <div style="overflow-x:auto;">
                                <table id="dataTbl" class="table table-bordered table-hover" style="font-size:13px;">
                                    <thead>
                                        <tr>
                                            <th width="10%">SLSI Entry No</th>
                                            <th width="10%">Application Posted in</th>
                                            <th width="30%">SLS No and Unit</th>
                                            <th width="30%">Product Description</th>
                                            <th width="10%">Status</th>
                                            <th class="hidden-print"></th>
                                            <th class="hidden-print"></th>
                                            <th class="hidden-print"></th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <p id="aaa"></p>
                        </div>
                    </div>                                   
                </div>
            </div> <jsp:include page="template/footer.jsp"/></div>
    </body>

help me someone

You need to display all in row. And also display all the button outside of the table? — synz
– synz, Commented Dec 4, 2017 at 5:45

synz · Accepted Answer · 2017-12-04 06:01:45Z

1

The problem in your code is. You append the button to $("#aaa"), which is outside of table.

Change this line

var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">');

To

var td6 = '<input type="button" class="btn btn-success" value="abc">';

And this is some jsfiddle example based on your code : https://jsfiddle.net/synz/zLykna0p/

answered Dec 4, 2017 at 6:01

synz

5933 silver badges8 bronze badges

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

Comments

Ajas Aju · Accepted Answer · 2017-12-04 05:39:38Z

0

You can use rows().every() property of dataTable

i will show you one example

var table = $('#example').DataTable();

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this
    .child(
        $(
            '<tr>'+
                '<td><input type="button" value="new button"/></td>'+    
            '</tr>'
        )
    )
    .show();
} );

This is an example Code.Please Change as per your requirements.

answered Dec 4, 2017 at 5:39

Ajas Aju

7857 silver badges30 bronze badges

2 Comments

Nipun Vidarshana Over a year ago

I cant understand that cord because i'm new to ajax and jquery.If u can please modify my cord....

Ajas Aju Over a year ago

Try to replace var td6 = pa.append('<input type="button" class="btn btn-success" value="abc">'); to var td6='<td><input type="button" class="btn btn-success" value="abc"></td> just try ..

somanalytics · Accepted Answer · 2017-12-04 06:02:17Z

0

The best way to add button is to prepare the button html in the API level at the last field: '${pageContext.request.contextPath}/restservice/App50/' + uID so that when the datatable does not need to manipulate the returned data from javascript.

answered Dec 4, 2017 at 6:02

somanalytics

653 bronze badges

Collectives™ on Stack Overflow

How to add button for each row using for loop in datatables by ajax and jquery

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related