文档章节

jQuery DataTables: How to add a checkbox column

银月光海
 银月光海
发布于 2016/04/11 20:18
字数 892
阅读 924
收藏 0

Example

Client-side processing mode with Ajax sourced data

Example below shows a data table in client-side processing mode where data is received from the server using Ajax.

Show
entries
Search:
Name Position Office Extn. Start date Salary

Name Position Office Extn. Start date Salary
Airi Satou Accountant Tokyo 5407 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 5797 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 1562 2009/01/12 $86,000
Bradley Greer Software Engineer London 2558 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 1314 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 4804 2012/12/02 $372,000
Bruno Nash Software Engineer London 6222 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 8330 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 3990 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 6224 2012/03/29 $433,060
Showing 1 to 10 of 57 entries



Data submitted to the server:

<table id="example" class="display select" cellspacing="0" width="100%"> <thead> <tr> <th><input name="select_all" value="1" id="example-select-all" type="checkbox"></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th></th> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table>



Highlights

Javascript

  • Columns definition

    'columnDefs': [{ 'targets': 0, 'searchable':false, 'orderable':false, 'className': 'dt-body-center', 'render': function (data, type, full, meta){ return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">'; } }],
  • Option columnsDef is used to define appearance and behavior of the first column ('targets': 0).

    Searching and ordering of the column is not needed so this functionality is disabled with searchable and orderable options.

    To center checkbox in the cell, internal DataTables CSS classdt-body-centeris used.

    Option render is used to prepare the checkbox control for being displayed in each cell of the first column. We use a trick with$('<div/>').text(data).html()to encode HTML entities that could be present in the data.

    Another trick here is to give input element a name with square brackets (id[]), this will make handling of list of checked checkboxes easier on the server-side. For example, PHP will convert all these parameters to an array, see PHP FAQ: How do I get all the results from a select multiple HTML tag for more information.

  • Initial sorting order

    'order': [[1, 'asc']],
  • By default, DataTables sorts table by first column in ascending order. By using order option we select another column to perform initial sort.

  • “Select/deselect all” control

    // Handle click on "Select all" control $('#example-select-all').on('click', function(){ // Get all rows with search applied var rows = table.rows({ 'search': 'applied' }).nodes(); // Check/uncheck checkboxes for all rows in the table $('input[type="checkbox"]', rows).prop('checked', this.checked); });
  • We attach event handler to handle clicks on “Select all” control. To retrieve all checkboxes that are present in the table taking into account currently applied filter, we use rows() method using appropriate selector-modifier.

    // Handle click on checkbox to set state of "Select all" control $('#example tbody').on('change', 'input[type="checkbox"]', function(){ // If checkbox is not checked if(!this.checked){ var el = $('#example-select-all').get(0); // If "Select all" control is checked and has 'indeterminate' property if(el && el.checked && ('indeterminate' in el)){ // Set visual state of "Select all" control  // as 'indeterminate' el.indeterminate = true; } } });
  • The purpose of the event handler above is to detect when one of the checkboxes in the table is unchecked when “Select all” control was checked. When that happens, we can set “Select all” control to a special state indeterminate to indicate that not all checkboxes are checked.

  • Form submission

    // Handle form submission event $('#frm-example').on('submit', function(e){ var form = this; // Iterate over all checkboxes in the table table.$('input[type="checkbox"]').each(function(){ // If checkbox doesn't exist in DOM if(!$.contains(document, this)){ // If checkbox is checked if(this.checked){ // Create a hidden element  $(form).append( $('<input>') .attr('type', 'hidden') .attr('name', this.name) .val(this.value) ); } } }); });
    • When table is enhanced by jQuery DataTables plug-in, only visible elements exist in DOM. That is why by default form submits checkboxes from current page only.

      To submit checkboxes from all pages we need to retrieve them with $() API method. Then for each checkbox not present in DOM we add a hidden element to the form with the same name and value. This allows all the data to be submitted.

      It’s even more simple if form submission is performed via Ajax. In that case URL-encoded data for submission can be produced using the code below:

      var data = table.$('input[type="checkbox"]').serialize();

    Server-side processing

    Please note that the example and code above will work for client-side processing mode only.

    In server-side processing mode ('serverSide':true) elements<input type="checkbox">would exist for current page only. Once page is changed, the checked state of the checkboxes would not be preserved.

    See jQuery DataTables – Row selection using checkboxes and Select extension for a universal solution that will work for server-side processing mode as well.

    本文转载自:http://www.gyrocode.com/articles/jquery-datatables-how-to-add-a-checkbox-column/

    银月光海

    银月光海

    粉丝 37
    博文 365
    码字总数 46223
    作品 0
    浦东
    项目经理
    私信 提问
    DataTables_详细使用方法

    jQuery的DataTables插件的使用方法 ADMIN 2011年11月23日 13:15:45 发布 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的DataTable...

    喵王不瞌睡
    2015/05/02
    2.7K
    1
    jQuery的DataTables插件的使用方法

    一:官方网站:http://www.datatables.net/ 二:基本使用:http://www.guoxk.com/node/jquery-datatables 1、DataTables的默认配置 $(document).ready(function() { $('#example').dataTable......

    星痕2018
    2013/03/01
    817
    0
    使用jQuery表格插件 DataTables 碰到的一个问题

    使用jQuery表格插件 DataTables ,在后台查询数据库数据,转换成json串到前台通过 DataTables 组件显示数据表格。 现在碰到的问题是,如果查询出的数据存在null值,DataTables 就会报错,报错...

    叶落花开
    2012/02/05
    2.5K
    1
    在 Grails 中使用 jQuery 和 DataTables

    本文介绍如何构建一个基于 Grails 的数据浏览器来可视化复杂的表格数据。 我是 Grails 的忠实粉丝。当然,我主要是热衷于利用命令行工具来探索和分析数据的数据从业人员。数据从业人员经常需...

    作者: Chris Hermansen
    2018/11/24
    0
    0
    jquery datatables fixedColumn插件问题

    今天尝试了一下jQuery datatables插件,里面附赠了几个工具,其中一个是固定列的工具——fixedColumn,这个工具一开始使用正常,但是引用了datatables 的jqueryUI样式之后,固定列上的排序效...

    flamehazi
    2012/08/22
    3.4K
    1

    没有更多内容

    加载失败,请刷新页面

    加载更多

    mysql概览

    学习知识,首先要有一个总体的认识。以下为mysql概览 1-架构图 2-Detail csdn |简书 | 头条 | SegmentFault 思否 | 掘金 | 开源中国 |

    程序员深夜写bug
    58分钟前
    6
    0
    golang微服务框架go-micro 入门笔记2.2 micro工具之微应用利器micro web

    micro web micro 功能非常强大,本文将详细阐述micro web 命令行的功能 阅读本文前你可能需要进行如下知识储备 golang分布式微服务框架go-micro 入门笔记1:搭建go-micro环境, golang微服务框架...

    非正式解决方案
    今天
    4
    0
    前端——使用base64编码在页面嵌入图片

    因为页面中插入一个图片都要写明图片的路径——相对路径或者绝对路径。而除了具体的网站图片的图片地址,如果是在自己电脑文件夹里的图片,当我们的HTML文件在别人电脑上打开的时候图片则由于...

    被毒打的程序猿
    今天
    5
    0
    Flutter 系列之Dart语言概述

    Dart语言与其他语言究竟有什么不同呢?在已有的编程语言经验的基础上,我们该如何快速上手呢?本篇文章从编程语言中最重要的组成部分,也就是基础语法与类型变量出发,一起来学习Dart吧 一、...

    過愙
    今天
    3
    0
    rime设置为默认简体

    转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

    zhenruyan
    今天
    5
    0

    没有更多内容

    加载失败,请刷新页面

    加载更多

    返回顶部
    顶部