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