jquery - Creating n number of buttons (or variable number of buttons) in JavaScript -
i new javascript , having difficulty task. writing code paginate table have. right logic related buttons hard coded , want make more dynamic. meaning, have 5 buttons have separate code same thing , want refactor code have n buttons , 1 script controls them.
i want code generate (total records/number of records per page) number of buttons, want take value of button , pass existing code grab right section of data table.
how do though? of documentation i've found jquery libraries datatables (which spent hour working , did not display anything).
i appreciate tips, tricks, or tutorials.
edit
$(document).ready(function () { $('#b1').click(function () { var data = $("#isgeo").serializearray(); data.push({ name: "page", value: '1' }) $.ajax({ type: 'get', url: '@url.action("gettable", "subsidencepoints")', data: $.param(data), cache: false, processdata: false, contenttype: false }).done(function (result) { $('#sub-table').html(result); }); $('#b2').click(function () { var data = $("#isgeo").serializearray(); data.push({ name: "page", value: '2' }) $.ajax({ type: 'get', url: '@url.action("gettable", "subsidencepoints")', data: $.param(data), cache: false, processdata: false, contenttype: false }).done(function (result) { $('#sub-table').html(result); });
pretty easy. have create loop loop through total number of buttons , use createelement create button , attach event programmatically. check out following code.
<div id="nav-buttons"> </div> <script> var totalrecords = 500; var recordsperpage = 50; var totalbuttons = totalrecords/recordsperpage; var navbuttons = document.getelementbyid("nav-buttons"); console.log(totalbuttons) (var b=0; b<totalbuttons;b++) { var button = document.createelement("button"); button.setattribute("pageto", b); button.innerhtml="page " + b; navbuttons.appendchild(button); button.addeventlistener("click", function(event) { var btn = event.target; var page = btn.getattribute("pageto"); navbuttons.appendchild(btn); alert(page); // goto(page) -- write function getting records page[page] }); } </script>
Comments
Post a Comment