JQuery Datatable - Checkbox selection_datatables checkbox selection-CSDN博客

本文链接：https://blog.csdn.net/u011537073/article/details/53136489

Checkbox selection

A selected row is typically shown in a DataTable by using a highlight background colour - however, it can also be useful to use other styling options to convey the selected state of items in a table to the end user.

A common option is to use a checkbox which can be clicked on to toggle row selection, which can be particularly useful if you wish to restrict row selection activation to a particular column, so other actions can be performed on the other cells in the table (such as inline editing).

A column can be shown with a checkbox that reflects the row's selected status simply through use of the select-checkboxCSS class for that column (columns.className). Row selection can be restricted to that column using the select.selector option.

The checkbox is not an <input type="checkbox"> element, but rather a CSS that uses the :before and :after pseudo elements of the cell to draw a box and the tick. This can therefore be easily modified to suit the style of your site / app.

Show entries

Search:

Name	Position	Office	Age	Salary
Name	Position	Office	Age	Salary
Airi Satou	Accountant	Tokyo	33	$162,700
Angelica Ramos	Chief Executive Officer (CEO)	London	47	$1,200,000
Ashton Cox	Junior Technical Author	San Francisco	66	$86,000
Bradley Greer	Software Engineer	London	41	$132,000
Brenden Wagner	Software Engineer	San Francisco	28	$206,850
Brielle Williamson	Integration Specialist	New York	61	$372,000
Bruno Nash	Software Engineer	London	38	$163,500
Caesar Vance	Pre-Sales Support	New York	21	$106,450
Cara Stevens	Sales Assistant	New York	46	$145,600
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	$433,060

Showing 1 to 10 of 57 entries 1 row selected

Previous 1 2 3 4 5 6 Next

Javascript
HTML
CSS
Comments (0)

The Javascript shown below is used to initialise the table shown in this example:

 
          $(document).ready( 
          function 
          () { 
         
          $( 
          '#example' 
          ).DataTable( { 
         
          columnDefs: [ { 
         
          orderable:  
          false 
          , 
         
          className:  
          'select-checkbox' 
          , 
         
          targets:   0 
         
          } ], 
         
          select: { 
         
          style:     
          'os' 
          , 
         
          selector:  
          'td:first-child' 
         
          }, 
         
          order: [[ 1,  
          'asc'  
          ]] 
         
          } ); 
         
          } );