Detailed explanation of JavaScript BootStrap Table background data binding, special column processing, and sorting functions-JS Tutorial-php.cn

Detailed explanation of JavaScript BootStrap Table background data binding, special column processing, and sorting functions

黄舟

Release： 2017-05-28 10:29:35

Original

2273 people have browsed it

This section mainly introduces the background of Bootstrap Data binding, special column processing and column sorting functions. The code is simple and easy to understand, very good, and has reference value. It is needed Friends, please refer to it

This section mainly introduces Bootstrap’s background data binding, special column processing and column sorting functions

1. Data binding

Generally when doing programming, it is rare to use json files to directly bind data. Basically we use programming language to obtain data and do data binding.

Place a Table control

<table id="table" ></table>

Copy after login

Code to call javascript

<script >
$(&#39;#table&#39;).bootstrapTable({
  url: &#39;tablejson.jsp&#39;,  //数据绑定，后台的数据从jsp代码
  search:true,      
  uniqueId:"Id",
  pageSize:"5",
  pageNumber:"1",
  sidePagination:"client",
  pagination:true,
  height:&#39;400&#39;,
  columns: [
  {
    field: &#39;Id&#39;,
    title: &#39;中文&#39;
  }, {
    field: &#39;Name&#39;,
    title: &#39;Name&#39;
  }
  , {
    field: &#39;Desc&#39;,
    title: &#39;Desc&#39;
  }
  ],
});

Copy after login

2. Special column Processing

In practical applications, we need to add our special columns, such as operation columns. See the following js code to add a special column

{
    field: &#39;#&#39;,
    title: &#39;control&#39;,formatter:function(value,row,index){
    var del=&#39;<a href="Delete!delete.action?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >删除</a>&#39;;
    var updt=&#39;<a href="supdate.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >修改</a>&#39;;
    var add=&#39;<a href="Include.jsp?Id=&#39;+row.Id+&#39;" rel="external nofollow" rel="external nofollow" >增加</a>&#39;
    return del+" "+updt+"&nbsp"+add;
    }
  }

Copy after login

js The code is modified to


            
                Latest Articles by Author
                
                                            
                            
                                
                                Video material on building your own PHP framework from scratch
                            
                            2023-03-15 16:54:01
                        
                                            
                            
                                
                                Example analysis of how PHPMailer uses QQ mailbox to complete the email sending function
                            
                            2023-03-15 12:26:02
                        
                                            
                            
                                
                                Introduction to how to receive emails in IMAP in php
                            
                            2023-03-14 18:58:01
                        
                                            
                            
                                
                                Example of how to quickly implement array deduplication in PHP
                            
                            2023-03-14 11:30:01
                        
                                            
                            
                                
                                Summary of the use of all attributes of the  tag in html
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                Summary of basic knowledge of PHP (necessary for beginners to get started)
                            
                            2023-03-16 15:20:01
                        
                                            
                            
                                
                                Introduction to the use of typeof in JavaScript
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                Introduction to the use of confirm() method in JavaScript
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                A detailed introduction to the HTML5 Placeholder attribute
                            
                            1970-01-01 08:00:00
                        
                                            
                            
                                
                                How to implement single-select, multiple-select and reverse-select in forms in ReactJS
                            
                            1970-01-01 08:00:00
                        
                                    
            
            
                Latest Issues
                
                                        
                        
                            Bootstrap Vue checkbox <b-table> <b-form-checkbox>
                            I'm trying to use b-form-checkbox with b-table. Try to retrieve the selected module ID. &l...
                            
                                
                                     From 2024-03-31 18:36:11
                                
                                
                                      0 
                                    1
                                    389
                                
                            
                        
                    
                    
                                    
            

            
                
                    Related Topics
                    More>
                    
                
                
                    
                                                
                             
                            js method to get array length 
                        
                                                
                             
                            js refresh current page 
                        
                                                
                             
                            js rounding 
                        
                                                
                             
                            js method to delete node 
                        
                                                
                             
                            JavaScript escape characters 
                        
                                                
                             
                            How to generate random numbers in js 
                        
                                                
                             
                            How to enable JavaScript 
                        
                                                
                             
                            Detailed explanation of Symbol class in JS