Jquery自定義button按鈕的幾種方法
更新時(shí)間：2014年06月11日 11:24:19 作者：
這篇文章主要介紹了Jquery.datatables 學(xué)習(xí)筆記之自定義button按鈕,需要的朋友可以參考下
1、第一種方法比較簡(jiǎn)單
"columns": [
{ "data": null,defaultContent: '<input type="button" onclick="" value="呵呵" />', orderable: false },
],
從代碼字面意思就能明白什么意思，但是怎樣從里邊獲取改行的信息我還不知道，所以顯得不是太實(shí)用，定義默認(rèn)值還可以。
{ "data": "id",orderable: false,
"mRender":function(data,type,full){
return "<input type='button' onclick='' value='"+data+"'/>";
}
},
剛看到一種方法就是使用回調(diào)，也可以獲取該列的值并傳遞，但也只能獲取一個(gè)值，仍然沒有第二種方法好。
2、第二種稍微麻煩，但比較實(shí)用
"fnRowCallback":function(nRow,aData,iDataIndex){
var id = $('td', nRow).eq(0).text();
var ip = $('td', nRow).eq(3).text();
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+
'<a href="javascript:onDel('+iDataIndex+')">刪除</a>');
return nRow;
},
在初始化行數(shù)據(jù)時(shí)調(diào)用一個(gè)回調(diào)方法，可以輕松的獲取該行數(shù)據(jù)，完成提交功能，但是有個(gè)缺點(diǎn)，需要后臺(tái)json傳一個(gè)空字段，也不夠靈活。
3、第三種方法，就是將兩種方法結(jié)合使用，可以完全前臺(tái)無需后臺(tái)操作
{ "data": null,orderable: false,}
"fnRowCallback":function(nRow,aData,iDataIndex){
var id = $('td', nRow).eq(0).text();
var ip = $('td', nRow).eq(3).text();
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+
'<a href="javascript:onDel('+iDataIndex+')">刪除</a>');
return nRow;
},
復(fù)制代碼 代碼如下:
"columns": [
{ "data": null,defaultContent: '<input type="button" onclick="" value="呵呵" />', orderable: false },
],
從代碼字面意思就能明白什么意思，但是怎樣從里邊獲取改行的信息我還不知道，所以顯得不是太實(shí)用，定義默認(rèn)值還可以。
復(fù)制代碼 代碼如下:
{ "data": "id",orderable: false,
"mRender":function(data,type,full){
return "<input type='button' onclick='' value='"+data+"'/>";
}
},
剛看到一種方法就是使用回調(diào)，也可以獲取該列的值并傳遞，但也只能獲取一個(gè)值，仍然沒有第二種方法好。
2、第二種稍微麻煩，但比較實(shí)用
復(fù)制代碼 代碼如下:
"fnRowCallback":function(nRow,aData,iDataIndex){
var id = $('td', nRow).eq(0).text();
var ip = $('td', nRow).eq(3).text();
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+
'<a href="javascript:onDel('+iDataIndex+')">刪除</a>');
return nRow;
},
在初始化行數(shù)據(jù)時(shí)調(diào)用一個(gè)回調(diào)方法，可以輕松的獲取該行數(shù)據(jù)，完成提交功能，但是有個(gè)缺點(diǎn)，需要后臺(tái)json傳一個(gè)空字段，也不夠靈活。
3、第三種方法，就是將兩種方法結(jié)合使用，可以完全前臺(tái)無需后臺(tái)操作
復(fù)制代碼 代碼如下:
{ "data": null,orderable: false,}
復(fù)制代碼 代碼如下:
"fnRowCallback":function(nRow,aData,iDataIndex){
var id = $('td', nRow).eq(0).text();
var ip = $('td', nRow).eq(3).text();
$('td:eq(-1)',nRow).html('<a href="javascript:onUpdate(\''+id+'\',\''+ip+'\')">修改</a> '+
'<a href="javascript:onDel('+iDataIndex+')">刪除</a>');
return nRow;
},
相關(guān)文章
jQuery動(dòng)態(tài)生成不規(guī)則表格(前后端)
這篇文章主要介紹了jQuery動(dòng)態(tài)生成不規(guī)則表格的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-02-02
js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素
js獲取方法要比jq的方法麻煩的多，主要是因?yàn)镕F瀏覽器，因?yàn)镕F瀏覽器也會(huì)把換行當(dāng)作dom元素，下面跟著小編一起來學(xué)習(xí)js jquery獲取當(dāng)前元素的兄弟級(jí) 上一個(gè) 下一個(gè)元素的，需要的朋友一起來學(xué)習(xí)吧2015-09-09
為jquery.ui.dialog 增加“在當(dāng)前鼠標(biāo)位置打開”的功能
在使用jquery.ui.dialog的過程中，發(fā)現(xiàn)position參數(shù)有些問題，無法通過position: [PosX, PosY]動(dòng)態(tài)傳遞位置參數(shù)。下面是官方demo 代碼2009-11-11
據(jù)統(tǒng)計(jì)，全世界排名前100萬的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過其他庫(kù)。微軟公司甚至把jQuery作為他們的官方庫(kù)。2011-08-08
jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單滾動(dòng)動(dòng)畫效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-04
本篇文章主要介紹了jQuery tip提示插件的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
jquery zTree異步加載簡(jiǎn)單實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了jquery zTree異步加載簡(jiǎn)單實(shí)例，ztree采用了延遲加載技術(shù)，上萬節(jié)點(diǎn)輕松加載，即使在 IE6 下也能基本做到秒殺，感興趣的小伙伴們可以參考一下2016-02-02
uploadify ，簡(jiǎn)單實(shí)用的flash上傳組件，兼容性良好。 現(xiàn)已有html5版本2012-06-06
jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全
這篇文章主要為大家詳細(xì)介紹了jquery css實(shí)現(xiàn)郵箱自動(dòng)補(bǔ)全功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02