javascript - How to find row index on button click in jqxDatatable? -
please checkout example need use jqxdatatable example
i set "edit" button in each row edit data. not find row index. if found row index can row data , update , save it. please checkout code below:
<html lang="en"> <head> <title id="description">column header template in jqxdatatable</title> <meta name="description" content="this sample demonstrates how can customize rendering of column headers in jqwidgets datatable widget."> <link rel="stylesheet" href="jqx.base.css" type="text/css" /> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqxcore.js"></script> <script type="text/javascript" src="jqxdata.js"></script> <script type="text/javascript" src="jqxbuttons.js"></script> <script type="text/javascript" src="jqxscrollbar.js"></script> <script type="text/javascript" src="jqxmenu.js"></script> <script type="text/javascript" src="jqxdatatable.js"></script> <script type="text/javascript" src="jqxcheckbox.js"></script> <script type="text/javascript" src="demos.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare data var data = new array(); var firstnames = ["nancy", "andrew", "janet", "margaret", "steven", "michael", "robert", "laura", "anne"]; var lastnames = ["davolio", "fuller", "leverling", "peacock", "buchanan", "suyama", "king", "callahan", "dodsworth"]; var titles = ["sales representative", "vice president, sales", "sales representative", "sales representative", "sales manager", "sales representative", "sales representative", "inside sales coordinator", "sales representative"]; var titleofcourtesy = ["ms.", "dr.", "ms.", "mrs.", "mr.", "mr.", "mr.", "ms.", "ms."]; var birthdate = ["08-dec-48", "19-feb-52", "30-aug-63", "19-sep-37", "04-mar-55", "02-jul-63", "29-may-60", "09-jan-58", "27-jan-66"]; var hiredate = ["01-may-92", "14-aug-92", "01-apr-92", "03-may-93", "17-oct-93", "17-oct-93", "02-jan-94", "05-mar-94", "15-nov-94"]; var address = ["507 - 20th ave. e. apt. 2a", "908 w. capital way", "722 moss bay blvd.", "4110 old redmond rd.", "14 garrett hill", "coventry house", "miner rd.", "edgeham hollow", "winchester way", "4726 - 11th ave. n.e.", "7 houndstooth rd."]; var city = ["seattle", "tacoma", "kirkland", "redmond", "london", "london", "london", "seattle", "london"]; var postalcode = ["98122", "98401", "98033", "98052", "sw1 8jr", "ec2 7jr", "rg1 9sp", "98105", "wg2 7lt"]; var country = ["usa", "usa", "usa", "usa", "uk", "uk", "uk", "usa", "uk"]; var homephone = ["(206) 555-9857", "(206) 555-9482", "(206) 555-3412", "(206) 555-8122", "(71) 555-4848", "(71) 555-7773", "(71) 555-5598", "(206) 555-1189", "(71) 555-4444"]; var notes = ["education includes ba in psychology colorado state university in 1970. completed 'the art of cold call.' nancy member of toastmasters international.", "andrew received bts commercial in 1974 , ph.d. in international marketing university of dallas in 1981. fluent in french , italian , reads german. joined company sales representative, promoted sales manager in january 1992 , vice president of sales in march 1993. andrew member of sales management roundtable, seattle chamber of commerce, , pacific rim importers association.", "janet has bs degree in chemistry boston college (1984). has completed certificate program in food retailing management. janet hired sales associate in 1991 , promoted sales representative in february 1992.", "margaret holds ba in english literature concordia college (1958) , ma american institute of culinary arts (1966). assigned london office temporarily july through november 1992.", "steven buchanan graduated st. andrews university, scotland, bsc degree in 1976. upon joining company sales representative in 1992, spent 6 months in orientation program @ seattle office , returned permanent post in london. promoted sales manager in march 1993. mr. buchanan has completed courses 'successful telemarketing' , 'international sales management.' fluent in french.", "michael graduate of sussex university (ma, economics, 1983) , university of california @ los angeles (mba, marketing, 1986). has taken courses 'multi-cultural selling' , 'time management sales professional.' fluent in japanese , can read , write french, portuguese, , spanish.", "robert king served in peace corps , traveled extensively before completing degree in english @ university of michigan in 1992, year joined company. after completing course entitled 'selling in europe,' transferred london office in march 1993.", "laura received ba in psychology university of washington. has completed course in business french. reads , writes french.", "anne has ba degree in english st. lawrence college. fluent in french , german."]; var k = 0; (var = 0; < 5; i++) { var row = {}; row["firstname"] = firstnames[k]; row["lastname"] = lastnames[k]; row["title"] = titles[k]; row["titleofcourtesy"] = titleofcourtesy[k]; row["birthdate"] = birthdate[k]; row["hiredate"] = hiredate[k]; row["address"] = address[k]; row["city"] = city[k]; row["postalcode"] = postalcode[k]; row["country"] = country[k]; row["homephone"] = homephone[k]; row["notes"] = notes[k]; data[i] = row; k++; } var source = { localdata: data, datatype: "array" }; var dataadapter = new $.jqx.dataadapter(source); var allrowsselected = function () { var selection = $("#datatable").jqxdatatable('getselection'); var rows = $("#datatable").jqxdatatable('getrows'); if (selection.length == 0) { return false; } if (rows.length != selection.length) { return null; } return true; } var updatingselection = false; var updatingselectionfromdatatable = false; $("#datatable").jqxdatatable( { width: 850, source: dataadapter, columns: [ { text: 'photo', align: 'center', datafield: 'firstname', width: 80, renderer: function (text, align, height) { var checkbox = "<div id='checkbox' style='z-index: 999; margin: 5px; margin-left: 30px; margin-top: 8px; margin-bottom: 3px;'>"; checkbox += "</div>"; return checkbox; }, rendered: function (element, align, height) { element.jqxcheckbox(); element.on('change', function (event) { if (!updatingselectionfromdatatable) { var args = event.args; var rows = $("#datatable").jqxdatatable('getrows'); updatingselection = true; if (args.checked) { (var = 0; < rows.length; i++) { $("#datatable").jqxdatatable('selectrow', i); } } else { $("#datatable").jqxdatatable('clearselection'); } updatingselection = false; } }); return true; }, // row - row's index. // column - column's data field. // value - cell's value. // rowdata - rendered row's object. cellsrenderer: function (row, column, value, rowdata) { var image = "<div style='margin: 5px; margin-bottom: 3px;'>"; var imgurl = 'images/' + rowdata.firstname.tolowercase() + '.png'; var img = '<img width="60" height="60" style="display: block;" src="' + imgurl + '"/>'; image += img; image += "</div>"; return image; } }, { text: 'details', align: 'center', datafield: 'lastname', // row - row's index. // column - column's data field. // value - cell's value. // rowdata - rendered row's object. cellsrenderer: function (row, column, value, rowdata) { var container = '<div style="width: 100%; height: 100%;">' var leftcolumn = '<div style="float: left; width: 50%;">'; var rightcolumn = '<div style="float: left; width: 50%;">'; var firstname = "<div style='margin: 10px;'><b>first name:</b> " + rowdata.firstname + "</div>"; var lastname = "<div style='margin: 10px;'><b>last name:</b> " + rowdata.lastname + "</div>"; var title = "<div style='margin: 10px;'><b>title:</b> " + rowdata.title + "</div>"; var address = "<div style='margin: 10px;'><b>address:</b> " + rowdata.address + "</div>"; leftcolumn += firstname; leftcolumn += lastname; leftcolumn += title; leftcolumn += address; leftcolumn += "</div>"; var postalcode = "<div style='margin: 10px;'><b>postal code:</b> " + rowdata.postalcode + "</div>"; var city = "<div style='margin: 10px;'><b>city:</b> " + rowdata.city + "</div>"; var phone = "<div style='margin: 10px;'><b>phone:</b> " + rowdata.homephone + "</div>"; var hiredate = "<div style='margin: 10px;'><b>hire date:</b> " + rowdata.hiredate + "</div>"; var editbuton = '<input type="button" class="editbuttons" id="button' + row + '" value= "edit" />'; rightcolumn += postalcode; rightcolumn += city; rightcolumn += phone; rightcolumn += hiredate; rightcolumn += editbuton; rightcolumn += "</div>"; container += leftcolumn; container += rightcolumn; container += "</div>"; return container; } } ] }); $("#datatable").on('rowselect', function (event) { updatingselectionfromdatatable = true; if (!updatingselection && $("#checkbox").length > 0) { $("#checkbox").jqxcheckbox({ checked: allrowsselected() }); } updatingselectionfromdatatable = false; }); $("#datatable").on('rowunselect', function (event) { updatingselectionfromdatatable = true; if (!updatingselection && $("#checkbox").length > 0) { $("#checkbox").jqxcheckbox({ checked: allrowsselected() }); } updatingselectionfromdatatable = false; }); }); </script> </head> <body class='default'> <div id="datatable"></div> </body> </html> to download source code click here
please checkout image of filled datatable below: 
try having row value assigned button data-row attribute
'<input type="button" class="editbuttons" data-row="' + row + '" id="button' + row + '" value="edit"/>' then
$(".editbuttons").click(function(event) { var index = event.target.getattribute('data-row'); // should row index }); 
Comments
Post a Comment