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