Datatables 行內(nèi)編輯仿吞,獲取鼠標點擊的當前單元格

Datatables 行內(nèi)編輯,獲取鼠標點擊的當前單元格
首先需要引入,重點在 columnDefs:

<link  rel="stylesheet">
<script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

html代碼:

<table id="editable">
</table>

js代碼:

   var oTable;
    oTable = $('#editable').DataTable({
            ajax: {
                url: "/keyword/keywordAjax",
                type: "post",
                data: function (d) {
                  //d 是原始的發(fā)送給服務(wù)器的數(shù)據(jù)氧猬,默認很長怀伦,這里是我自己封裝過的壁涎,你使用自己的方式傳輸data就可以了。
                }
            },
            searching: false,//關(guān)閉搜索框
            serverSide: true,//服務(wù)器分頁
            processing: true,
            paging: true,
            bSort: true,
            ordering: true,
            autoWidth: true,
            scrollCollapse: false,
            stateSave: true,//開啟記錄上次翻頁
            info:true,
            createdRow: function (row, data, index) {
                /* 設(shè)置表格中的內(nèi)容居中 */
                $('td', row).attr("class", "text-center");
                $('th').attr("class", "text-center");
            },
            columns: [
                {
                    title: "ID",
                    data: "id"
                } ,{
                    title:"中文名稱",
                    data:"displayvaluezh"
                } ,{
                    title:"操作列",
                    render:function (data,type,full,callback) {
                        return `<a  title="編輯" onclick="#">編輯</a>;
                    }
                }
            ],
           columnDefs: [{
        "targets": [3, 4, 5, 7], //設(shè)置你要給哪一列開啟行內(nèi)編輯
        fnCreatedCell: function(cell, cellData, rowData, rowIndex, colIndex) {
            var trow = null;
            $(cell).click(function() {
                $(this).html('<input type="text" value="請輸入" size="16" style="width: 100%"/>');
                var aInput = $(this).find(":input");
                aInput.focus().val(cellData);
                //在用戶點擊某一單元格的時候志秃,獲取當前單元格的信息( trow )怔球,以便后面修改和使用。
                trow = oTable.row($(this)).data();
            });
            $(cell).on("blur", ":input", function() {
                var text = $(this).val();
                $(cell).html(text);
                oTable.cell(cell).data(text);
                console.info("當前修改行:" + JSON.stringify(trow));
                //現(xiàn)在你就可以將獲取到當前行的json發(fā)送到后臺進行修改了
            });
        })
                }]
            }
        });

datatables的API 和文檔教程太散了浮还,大家如果有其他需求可以去看看:http://datatables.club/blog/listall.html
最后感謝來自:(https://www.cnblogs.com/GaiaBing/p/9317702.html)提供的幫助

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末竟坛,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子钧舌,更是在濱河造成了極大的恐慌担汤,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件洼冻,死亡現(xiàn)場離奇詭異崭歧,居然都是意外死亡,警方通過查閱死者的電腦和手機撞牢,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進店門驾荣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人普泡,你說我怎么就攤上這事播掷。” “怎么了撼班?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵歧匈,是天一觀的道長。 經(jīng)常有香客問我砰嘁,道長件炉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任矮湘,我火速辦了婚禮斟冕,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘缅阳。我一直安慰自己磕蛇,他們只是感情好,可當我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布十办。 她就那樣靜靜地躺著秀撇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪向族。 梳的紋絲不亂的頭發(fā)上呵燕,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天,我揣著相機與錄音件相,去河邊找鬼再扭。 笑死氧苍,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的泛范。 我是一名探鬼主播候引,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼敦跌!你這毒婦竟也來了澄干?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤柠傍,失蹤者是張志新(化名)和其女友劉穎麸俘,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體惧笛,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡从媚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了患整。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拜效。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖各谚,靈堂內(nèi)的尸體忽然破棺而出紧憾,到底是詐尸還是另有隱情,我是刑警寧澤昌渤,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布赴穗,位于F島的核電站,受9級特大地震影響膀息,放射性物質(zhì)發(fā)生泄漏般眉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一潜支、第九天 我趴在偏房一處隱蔽的房頂上張望甸赃。 院中可真熱鬧,春花似錦冗酿、人聲如沸埠对。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鸠窗。三九已至,卻和暖如春胯究,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背躁绸。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工裕循, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留臣嚣,地道東北人。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓剥哑,卻偏偏與公主長得像硅则,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子株婴,可洞房花燭夜當晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 前端知識結(jié)構(gòu)https://github.com/JacksonTian/fks Web前端開發(fā)大系概覽https...
    柴東啊閱讀 985評論 0 10
  • 1-------- 走進前端 2-------- jQuery 3-------- CSS 4-------- A...
    依依玖玥閱讀 2,319評論 0 34
  • http://datatables.net/release-datatables/examples/api/sel...
    yxCassiel閱讀 414評論 0 0
  • 在明斯克吃飯不算貴也不算便宜怎虫,在外面吃比較貴,在土耳其餐廳買一個300克的土耳其雞肉卷就要十七八元人民幣困介;在宿舍煮...
    學(xué)海無涯168閱讀 1,212評論 0 1
  • 1 我害怕鬼…… 從來不敢看任何有關(guān)鬼的恐怖片大审。 晚上起來去廁所要鼓足很大的勇氣。 一個人的時候座哩,晚上會把所有的臥...
    億小灰閱讀 269評論 0 0