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!

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!

• javascript
• jquery
• twitter-bootstrap-3
• bootstrap-table

Share Improve this question Follow edited Apr 10, 2015 at 9:28 Ambareesh Surendran 50822 silver badges1212 bronze badges asked Apr 10, 2015 at 9:24 WaelhiWaelhi 31522 gold badges88 silver badges1919 bronze badges 0

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

If you want to return / render column at known position, simply use the following function block

formatter : function(value,row,index) {
   return '<input name="elementname"  value="'+value+'"/>';
 }   

If you want to exclude / skip some columns or want to render particular column (add empty curly braces pairs {},{},{}, like this according to how much column you have to shift) for example,

columns: [ {},{},{},  

           {
             field: 'operate',
             title: 'Item Operate',
             align: 'center',
             valign: 'middle',
             clickToSelect: false,
             formatter : function(value,row,index) {
               return '<input name="elementname"  value="'+value+'"/>';
             }
           }
         ]

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 
                }  
            }]

        });

I am not familiar with this library, but I looked at the docs and this is what I think you need. formatter can just be a anonymous function like this:

formatter : function(value) {
    //value contains the current value in the cell.  whatever you return will be the new value of the cell.
       return '<input name="myinput" />';
}