insert input type column in bootstrap table

Question

I'm having a problem in bootstrap table, I have a bootstrap table populated by a data from a database by using JQuery AJAX, what I want to do is insert/add <input type="text"/> on last column on every record.

My Jquery Script:

<script type="text/javascript">
    $(function(){

        var baseurl = "<?php print site_url('/quotes/get'); ?>";                  

            $.ajax({
                method: "POST",
                url: baseurl,
                data: { analid: 1 },
                dataType: 'json'
            })
                .done(function( msg ) {

                console.log(msg);

                $('#qtable').bootstrapTable({
                    data: msg
                });

            });

    });
</script>

the script above is working displaying the data from database, then I found this reference(LINK HERE), on the bottom part of that web is where I saw some method of bootstraptable like adding static column.

Updated Code Jquery Script:

 $(function() {
    var baseurl = "<?php print site_url('index.php/quotes/get'); ?>";
    $.ajax({
            method: "POST",
            url: baseurl,
            data: {
                analid: 1
            },
            dataType: 'json'
        })
        .done(function(msg) {

            console.log(msg);

            $('#qtable').bootstrapTable({
                data: msg,
                columns: [{ //<--- here is where I lost.. I don't know what to do here or what should I add..
                    field: 'operate',
                    title: 'Item Operate',
                    align: 'center',
                    valign: 'middle',
                    clickToSelect: false,
                    formatter: operateFormatter,
                    events: operateEvents
                }]

            });

        });
});

Any alternative and optimized way solutions is much appreciated.

Thanks!

Answer 1

you can use column option formatter . see example HERE

formatter : function(value,row,index) {
   return '<input name="elementname"  value="'+value+'"/>';
   //return '<input name="elementname"  value="'+row.id+'"/>';     here id is your field name
 }     

The cell formatter function, take three parameters:

1. value: the field value.
2. row: the row record data.
3. index: the row index.

in this case your code will be as below.(assume that 'operate' is your last column name )

$('#qtable').bootstrapTable({
            data: msg,
            columns: [{ //<--- here is where I lost.. I don't know what to do here or what should I add..
                field: 'operate',
                title: 'Item Operate',
                align: 'center',
                valign: 'middle',
                clickToSelect: false,
                formatter : function(value,row,index) {
                   return '<input name="elementname"  value="'+value+'"/>';
                   //return '<input name="elementname"  value="'+row.id+'"/>';     here id is your field name 
                }  
            }]

        });