Add id to dynamically created row using bootstrap table in jquery

Question

I am creating Bootstrap table using JSON values. I can add class dynamically to row. But i cant add ID to row when creating dynamically bootstrap table. Please find my code,

HTML:

<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>

JS:

$.ajax({
        type: "POST",
        url: "apilist",
        data: "",
        success: function (response) {
                    if (response != null) {
                        var data = [];
                        $.each(response.Slip, function (index) {
                            var obj = {};
                            obj.SlipID = response.Slip[index].SlipID;
                            obj.Client = response.Slip[index].Client;
                            data.push(obj);
                        });
                        $('#eventsTable').bootstrapTable({
                            columns: [
                                { field: "state", checkbox: true },
                                { field: "SlipID", title: 'SlipID', sortable: true, class : "hide" },
                                { field: "Client", title: 'Client', sortable: true },
                            ],
                            data: data,
                        });
                    }
          }
});

Please let me know the suggestions, Thanks.

Answer 1

For this you can use rowAttributes for row attributes and rowStyle for row styling.

Here is below CODE SNIPPET you can check.

I hope this will help/guid you or achieve your requirement.

var data = [{
        "name": "Bahrain",
        "code": "BH"
    }, {
        "name": "Burundi",
        "code": "BI"
    }, {
        "name": "Benin",
        "code": "BJ"
    }, {
        "name": "Bhutan",
        "code": "BT"
    }, {
        "name": "Jamaica",
        "code": "JM"
    }, {
        "name": "Bouvet Island",
        "code": "BV"
    }, {
        "name": "Botswana",
        "code": "BW"
    }, {
        "name": "Samoa",
        "code": "WS"
    }, {
        "name": "Bonaire, Saint Eustatius and Saba ",
        "code": "BQ"
    }, {
        "name": "Brazil",
        "code": "BR"
    }];

    $('#eventsTable').bootstrapTable({
        columns: [{
            title: "Conutry Code",
            field: 'code',
            sortable: true
        }, {
            title: "Conutry name",
            field: 'name',
            sortable: true
        }],
        data: data,
        rowStyle: function(row, index) {
            return {
                classes: `row-border ${index%2==1?'row-even':'row-odd'}`
            };
        },
        rowAttributes: function(row, index) {
            return {
                id: `x-bootstrap-row-${index+1}`
            };
        }
    });

.row-border{
  border-bottom: 1px solid #ccc;
}
.row-odd{
  background-color: wheat;
}
.row-even{
  background-color: whitesmoke;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>


<table id="eventsTable" data-checkbox="true" data-sortable="true" data-row-style="rowStyle"></table>