2. 程式人生 > >icheck結合datatable使用方法及實現全選、反選功能

icheck結合datatable使用方法及實現全選、反選功能

阿新 • • 發佈：2019-02-03
var table = $("#user_index").DataTable({ order: [ ["1", 'asc'] ], //按照發布時間降序排序 page: false, serverSide:true, info: true, autoWidth: true, searching:true, ajax: "<?php echo APP_URL_ROOT?>/Test/get_datatable", columns: [{ data: null
},{ data: "id", },{ data: "name", },/*{ data: "create_category_time", },{ data: "ROLENAME", },*/{ data: "null", }], columnDefs: [{ targets:0, data: null, defaultContent:"<input type ='checkbox' name='test' class='icheckbox_minimal' value=''>"
, },{ targets: -1, data: null, defaultContent: "<a>編輯</a>|<a>刪除</a>", },{ "orderable": false, "targets": [0,-1], //設定第一列和最後一列不可排序 }], createdRow: function(row, data, index) { $(row).data('id'
,data.id); $(row).find('.icheckbox_minimal').first().val(data.id); }, "fnDrawCallback": function(){ $("#all_checked").prop("checked",false); }, "language": { "processing": "處理中...", "lengthMenu": "顯示 _MENU_ 項結果", "zeroRecords": "沒有匹配結果", "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項", "infoEmpty": "顯示第 0 至 0 項結果，共 0 項", "infoFiltered": "(由 _MAX_ 項結果過濾)", "infoPostFix": "", "search": "搜尋:", "searchPlaceholder": "搜尋...", "url": "", "emptyTable": "表中資料為空", "loadingRecords": "載入中...", "infoThousands": ",", "paginate": { "first": "首頁", "previous": "上頁", "next": "下頁", "last": "末頁" }, "aria": { paginate: { first: '首頁', previous: '上頁', next: '下頁', last: '末頁' }, "sortAscending": ": 以升序排列此列", "sortDescending": ": 以降序排列此列" }, "decimal": "-", "thousands": "." } }); //實現全選功能 $("#all_checked").click(function(){ $('[name=test]:checkbox').prop('checked',this.checked);//checked為true時為預設顯示的狀態 }); //實現反選功能 $("#checkrev").click(function(){ $('[name=test]:checkbox').each(function(){ this.checked=!this.checked; }); }); $("#btn").click(function(){ var a = []; $('input[name="test"]:checked').each(function(){ a.push($(this).val()); // console.log($(this).val()); }); console.log(a); });

相關推薦

icheck結合datatable使用方法及實現全選、反選功能

var table = $("#user_index").DataTable({ order: [ ["1", 'asc'] ], //按照發布時間降序排序 page: false, serverSide:true,

JQuery實現全選、反選和取消功能

oct put 執行 tab function src color gpo 不用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

利用jQuery實現全選、全不選、反選(button)

htm nag ttr check n) 足球 text ctype cti <!DOCTYPE html><html><head><meta charset="utf-8"><title>&l

使用jQuery實現全選、全不選、 反選(button)

jquery實現 mage water oct ces div charset body check <!DOCTYPE html><html><head><meta charset="utf-8"><

利用jQuery實現全選、全不選、反選(checkBox)

utf body type charset his all set htm script <!DOCTYPE html><html><head><meta charset="utf-8"><title

純js實現checkbox的全選、反選、全不選

純js實現checkbox的全選、反選、分開：a. 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l

jQuery js實現checkbox復選框全選、全不選、反選 PHP

實現 com check set false jquer display value round <!doctype html> <html lang="en"> <head> <meta charset="

用jQuery實現（全選、反選、全不選功能）

sele 元素 selectall input html元素 UNC 推薦 not rop 在jQuery選擇器的基礎下我們實現一個全選，反選，全不選功能！ <script type="text/javascript"> $(functio

angular4實現購物車全選、反選、單選功能

  <div class="items" *ngFor="let item of data; let i = index;"> <input type="checkbox" name="checkSingle[]" class="my_chec

JavaScript實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選 操作。 並且將可變的部分設定為JS的引數，以實現程式碼複用。 全選和全不選 第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) {     var

js複選框實現全選、全不選、反選

通過input就可以將一個簡單的複選框呈現在頁面上 <input type="checkbox" /> 要實現的大概就是這樣一個頁面 思路 全選 因為要得到複選框陣列，而id又不能重複。所以通過name來得到複選框陣列。得到陣列後遍歷，將

JavaScript複選框實現全選、全不選、反選、提交

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>全選<

jQuery複選框實現全選、全不選、反選、獲取選項值

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>複

用JQuery實現全選、全不選、反選

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.1.min.js

vue三種方式實現：全選、反選、全不選

方法一：v-model 與 [{checked:true},…] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi

實現全選、反選的jquery

//選中所有或反選所有的checkbox事件 //呼叫方法時，傳入當前checkbox狀態 function selectAll(checkedValue){ $(".checkChildren").prop("checked",checkedValue); } //當一

JQuery實現的 checkbox 全選、反選。

發現網上寫的全選的程式碼，不是完整的，是有bug的。全選它分幾種情況 1. 全選的checkbox選中時，子checkbox全部選中。反之，全部不選 2.子checkbox中，只要有沒有被選中的，取消全選checkbox的選中 3.子checkbox的數量和子checkbo

【JavaScript】實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選 操作。 並且將可變的部分設定為JS的引數，以實現程式碼複用。 全選和全不選 第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var all

jQuery實現簡單全選、反選、全不選功能

例子：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <titl