CODEWITHSUNDEEP
javascripthtmlbootstrap-4
codec
codec

Reputation: 8826

How to set id on a bootstrap table column

I have the following sample HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });

           function LinkFormatter(value, row, index) {
                 return "<a href='/details/"+row.id+"'>"+value+"</a>";
                }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name" data-formatter="LinkFormatter">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
</body>
</html>

I want to add an href to the name column so that when clicked I could get redirected to ../details/id. I have added linkFormatter, but I am not able to set and fetch id on name column. How can this be done using Bootstrap table? I want to set id in so that I can use it.

I tried separating the js file as follows:

$(document).ready(function() {
   getServices();

});


function getServices(){
  var requestBody="{}";
        $.ajax({
                type : 'GET',
                url :  my_url,
                data : requestBody,
                headers: {
                        'Content-Type':'application/json'
                },
                dataType : "json",
                success : function(data) {
                        services = data;
                        fillServiceTable();
                },
                error: function(jqXHR, textStatus, errorThrown) {
                        displayConsoleMessages(jqXHR, textStatus, errorThrown);
                        renderErrorMessage("There was some error fetching devices.");
                }
        });
}

function fillServiceTable(){
$('#table').bootstrapTable({
                //Assigning data to table
                data: services
            });
}

function LinkFormatter(value, row, index) {
        return "<a href='/details/"+row.id+"'>"+value+"</a>";

Upvotes: 2

Views: 5216

Answers (1)

PSK
PSK

Reputation: 17953

Move your LinkFormatter function outside $(document).ready(function ()

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
     function LinkFormatter(value, row, index) {
                 return "<a href='/details/"+row.id+"'>"+value+"</a>";
                }
    
        $(document).ready(function () {
            //Sample Json data
            var jsondata = [
                {
                    "id": "1",
                    "Name": "Name1",
                    "Address": "Address1"
                },
                {
                    "id": "2",
                    "Name": "Name2",
                    "Address": "Address2"
                },
                {
                    "id": "3",
                    "Name": "Name3",
                    "Address": "Address3"
                }];

            $('#table').bootstrapTable({
                //Assigning data to table
                data: jsondata
            });
  
           
        });
    </script>
</head>
<body>
 
   
    <form id="form1" runat="server">
        <table id="table">
            <thead>
                <tr>
                    <th data-field="id">ID</th>
                    <th data-field="Name" data-formatter="LinkFormatter">Name</th>
                    <th data-field="Address">Address</th>
                </tr>
            </thead>
        </table>
    </form>
    
   
</body>
</html>

Upvotes: 5

Related Questions