2
ブートストラップ、ajax、jQueryを使ってページページを作った。しかし、私はそれを見ることに問題があります。ボタン1,2,3、......とコンテナdivを作成しました。最初はjQueryとAjaxを使用して5行を表示しました。しかし、2（2番目のボタン）ボタンをクリックすると、新しい5行がコンテナdivに最初に表示された5行と一緒に表示されます。ボタンをクリックすると、新しい行が前の行の下に追加されます。ボタンをクリックしたときに前の行を削除するにはどうすればいいですか？ブートストラップを使ってページ番号をつける方法
下記の私のコードです：
<html>
<body>
<div class="container">
</div>
<ul id="btns" class="pagination"></ul>
</body>
<script>
var current_page=1;
function change_page(page_no)
{
student(page_no);
}
$(document).ready(function()
{
student(1);
});
function student(page_no){
var data1 = ""
var total_rows=""
$.ajax({
type: "POST",
data:{ "page": page_no},
url: "ajax_connect.php",
dataType: "html",
success: function(rows)
{
console.log(JSON.parse(rows))
rows = JSON.parse(rows)
total_rows=rows.data;
table(total_rows);
total_buttons=rows.count/5;
total_buttons=total_buttons+1;
button(total_buttons);
}
})
}
function table(total_rows)
{
html+= "<div class='table-responsive' id='keywords'>";
html+= "<table class='table table-bordered table-striped'>";
html+= "<thead>" +
"<tr>" +
"<th><a id='emp_id'>Employee Id</a></th>" +
"<th><a id='emp_name'>Employee Name</a></th>" +
"<th><a id='email'>Email</a></th>" +
"<th><a id='message'>Message</a></th>" +
"<th><a id='date'>Date</a></th>" +
"</tr>" +
"</thead>";
//function table(total_rows)
for (var i in total_rows)
{
var row = total_rows[i];
//var row = rows[i];
var employee_id = row[0];
var employee_name = row[1];
var email = row[2];
var message = row[3];
var date = row[4];
html+= "<tr>" +
"<td width='25%'>" + employee_id + "</td>" +
"<td width='25%'>" + employee_name + "</td>" +
"<td width='25%'>" + email + "</td>" +
"<td width='25%'>" + message + "</td>" +
"<td width='25%'>" + date + "</td>" +
"</tr>";
}
html+= "</table>";
html+= "</div>";
$(".container").html(html);
}
function button(total_pages)
{
var buttons = "<ul class='pagination' align='center' >"
for (var i = 1; i<=total_pages; i ++)
{
buttons += "<li><a id= "+i+" onclick= 'change_page(" +i+ ")' href= '#'>"+i+"</a></li>"
}
buttons += "</ul>";
$(".pagination").html(buttons);
}
</script>
</html>
は、彼らが正常に動作しているAjaxのURL部分を無視します。
になります。新しい行を追加するときに、フレッシュな表で以前に追加されたものを消去してから新しいものを追加する場合。 –
大変ありがとうございます。 – Birju