JavaScriptでn個のボタン（または可変数のボタン）を作成する

Question

JavaScriptを初めて使用しています。このタスクには苦労しています。私はテーブルをページ付けするコードを書いています。現在、ボタンに関連するすべてのロジックはハードコードされており、よりダイナミックにしたいと考えています。つまり、私は同じことをするために別々のコードを持っている5つのボタンを持っています。私はn個のボタンとそれらをコントロールする1つのスクリプトを持つように私のコードをリファクタリングしたいと思います。

ボタンの総数/レコード数を生成するコードを作成し、そのボタンの値を取得して、既存のコードに渡してデータテーブルの右側のセクションを取得したいとします。 。

どうすればよいですか？私が見つけたすべてのドキュメントは、DataTablesのようなjQueryライブラリのためのものです（これは1時間の作業に費やしたもので、何も表示されませんでした）。

ヒント、トリック、またはチュートリアルをお待ちしております。

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); 
        }); 

Answer 1

かなり簡単。ループを作成してボタンの総数をループし、次にcreateElementを使用してボタンを作成し、プログラムにイベントをアタッチするだけです。次のコードを調べてください。

<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) 
 
for (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 your function for getting the records for page[page] 
 
    }); 
 
    
 
} 
 
    </script>

Answer 2

おそらくforループしてみてください -

$(document).ready(function() { 
    for (var i = 0; i < numButtons; i++) { 
     $('#b' + i).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); 
      }); 
     }); 
    } 
}); 

はあなたが後にしているものということですか？