Perfect Implementation of bootstrap paging query_javascript skills

This article mainly introduces a perfect bootstrap paging query and how to use bootstrap to implement paging query. This article will reveal for you how to use bootstrap to start our Java project, because it looks much better than easyUI. Then we started to check the Internet and check and do it. Although we introduced some bootstrap styles, there was no js Code, and all functions needed to be done by ourselves using js. In fact, it is not difficult, as long as we understand the essence of paging. After talking about this, let's see how the paging query table is made.
First:

1. Introduced css styles
We need to introduce the table style that comes with bootstrap, which looks nice. If we need to modify it, we will modify it based on it.

2. HTML text
Note that the id and class name of each label should not be changed, because it corresponds to some js Code and css styles. If no effect is displayed, or the displayed effect is not what you want, we can fine-tune it as appropriate.

 Student violation information<% -- <% @ Include file = "/common. jsp" %> -- %>
 <% @ Include file = "/bootstrap. jsp" %> 
   
  
    
   
           　　    Search      
  
 
 
   
  
   
    
Student violation information
     
 
 
      
  
  
 
   
 
    
Student ID
 
    
Name
 
    
Exam subjects
 
    
Test Room No.
 
    
Class
 
    
Invigilators
 
   
 
  
      
  
  
 
  
     
 
 
   
  
 
 
  
  
  
   
    Per page      10      25      50      100     Records   
  
  
   
   
Display 1st to 10 records, 57 in total
  
  
   
   
    
 
 
     
  
  
Previous
     
  
  
  1  
     
  
  
Next page →
    
 
 
   
  
 

3. Corresponding js Code
Fuzzy query events, carriage return events, previous steps, next steps, page selection, number of items displayed on each page, and other common functions are included. sort and select columns to display and hide.