多個(gè)datatable共存造成多個(gè)表格的checkbox都被選中
更新時(shí)間：2013年07月11日 16:57:10 作者：
所以當(dāng)有多個(gè)datatable 引用到一個(gè)頁(yè)面中的時(shí)候，全選事件會(huì)匹配全部的datatable，所以造成全部多個(gè)表格的checkbox被都被選中
【問題原因】
這個(gè)應(yīng)該是 jquery.datatable 控件本身的一個(gè)缺陷。
該控件中的checkbox小插件的id是寫死的，所以當(dāng)有多個(gè)datatable引用到一個(gè)頁(yè)面中的時(shí)候，全選事件會(huì)匹配全部的datatable，所以造成全部多個(gè)表格的checkbox被都被選中。
【解決方法】
所以最好是修改jquery.datatable控件，給生成的每個(gè)datatable下的checkbox賦 予不同的id，因?yàn)閐atatable的id是不一樣的，所以可以把 datatable的id作為 checkbox的前綴組成一個(gè)唯一的id 。 具體這個(gè)checkbox的調(diào)用事件也需要同步 替換成這個(gè)新id，進(jìn)行事件的調(diào)用。
[修改文件]
jqurey.datatable.ext.js (v0.0.1)
1. init方法修改：
$("#"+options.select_table).find('thead tr th:first-child')
.prepend('<input type="checkbox" value="CHK_ALL" id=“chk_all" />');
==>
$("#"+options.select_table).find('thead tr th:first-child')
.prepend('<input type="checkbox" value="CHK_ALL" id="'+options.select_table+'_chk_all" />');
2.subscribeAllChk方法修改：
$("#chk_all").click(function(){
==>
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").click(function(){
3.subscribeChk方法修改：
if(checked_chk_num == curr_page_chk_num){
$("#chk_all").attr('checked', 'checked');
}else{
$("#chk_all").removeAttr('checked');
}
==>
if(checked_chk_num == curr_page_chk_num){
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").attr('checked', 'checked');
}else{
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").removeAttr('checked');
}
這個(gè)應(yīng)該是 jquery.datatable 控件本身的一個(gè)缺陷。
該控件中的checkbox小插件的id是寫死的，所以當(dāng)有多個(gè)datatable引用到一個(gè)頁(yè)面中的時(shí)候，全選事件會(huì)匹配全部的datatable，所以造成全部多個(gè)表格的checkbox被都被選中。
【解決方法】
所以最好是修改jquery.datatable控件，給生成的每個(gè)datatable下的checkbox賦 予不同的id，因?yàn)閐atatable的id是不一樣的，所以可以把 datatable的id作為 checkbox的前綴組成一個(gè)唯一的id 。 具體這個(gè)checkbox的調(diào)用事件也需要同步 替換成這個(gè)新id，進(jìn)行事件的調(diào)用。
[修改文件]
jqurey.datatable.ext.js (v0.0.1)
1. init方法修改：
復(fù)制代碼 代碼如下:
$("#"+options.select_table).find('thead tr th:first-child')
.prepend('<input type="checkbox" value="CHK_ALL" id=“chk_all" />');
==>
$("#"+options.select_table).find('thead tr th:first-child')
.prepend('<input type="checkbox" value="CHK_ALL" id="'+options.select_table+'_chk_all" />');
2.subscribeAllChk方法修改：
復(fù)制代碼 代碼如下:
$("#chk_all").click(function(){
==>
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").click(function(){
3.subscribeChk方法修改：
復(fù)制代碼 代碼如下:
if(checked_chk_num == curr_page_chk_num){
$("#chk_all").attr('checked', 'checked');
}else{
$("#chk_all").removeAttr('checked');
}
==>
if(checked_chk_num == curr_page_chk_num){
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").attr('checked', 'checked');
}else{
$("#"+$.fn.datatable_ext.defaults.select_table+"_chk_all").removeAttr('checked');
}
您可能感興趣的文章:
- 比較2個(gè)datatable內(nèi)容是否相同的方法
- datatable生成excel和excel插入圖片示例詳解
- c#將list類型轉(zhuǎn)換成DataTable方法示例
- 多個(gè)jquery.datatable共存,checkbox全選異常的快速解決方法
- DataTables List互相轉(zhuǎn)換的實(shí)現(xiàn)類示例
- 使用DataTable.Select 方法時(shí),特殊字符的轉(zhuǎn)義方法分享
- ASP.NET中DataTable與DataSet之間的轉(zhuǎn)換示例
- 將DataTable作為存儲(chǔ)過程參數(shù)的用法實(shí)例詳解
- datatable行轉(zhuǎn)列示例分享
相關(guān)文章
這篇文章主要介紹了jQuery讀取XML文件內(nèi)容的方法,實(shí)例分析了jQuery操作XML文件的技巧,需要的朋友可以參考下2015-03-03
隨著WEB2.0及ajax思想在互聯(lián)網(wǎng)上的快速發(fā)展傳播，陸續(xù)出現(xiàn)了一些優(yōu)秀的Js框架，其中比較著名的有Prototype、YUI、jQuery、mootools、Bindows以及國(guó)內(nèi)的JSVM框架等2011-01-01
jquery $.ajax相關(guān)用法分享，使用jquery的朋友可以參考下2012-03-03
jQuery Clone Bug解決代碼，具體看測(cè)試代碼。2010-12-12
這篇文章主要介紹了jQuery中unwrap()方法用法,實(shí)例分析了unwrap()方法的定義、功能及移除匹配元素父元素的使用技巧,需要的朋友可以參考下2015-01-01
JS秒殺倒計(jì)時(shí)功能完整實(shí)例【使用jQuery3.1.1】
這篇文章主要介紹了JS秒殺倒計(jì)時(shí)功能,結(jié)合完整實(shí)例形式分析了基于jQuery3.1.1基于時(shí)間函數(shù)的頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09
Jquery on方法綁定事件后執(zhí)行多次的解決方法
下面小編就為大家?guī)硪黄狫query on方法綁定事件后執(zhí)行多次的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
jquery自定義插件——window的實(shí)現(xiàn)【示例代碼】
下面小編就為大家?guī)硪黄猨query自定義插件——window的實(shí)現(xiàn)【示例代碼】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實(shí)戰(zhàn)篇》中，我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動(dòng)態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03
下面介紹自己寫的一個(gè)jQuery圓角的插件，功能非常簡(jiǎn)單。目前只能實(shí)現(xiàn)1px的固定弧度的圓角矩形邊框。2010-10-10