显示我的用户数量并将其显示在徽章上。 (代码点火器)
Posted
技术标签:
【中文标题】显示我的用户数量并将其显示在徽章上。 (代码点火器)【英文标题】:Showing the count of my user and display it on badge. (Codeigniter) 【发布时间】:2021-04-03 07:47:55 【问题描述】:这里是新手。我做了一个 ajax 来计算用户数并将其显示在我的徽章上,但是,每当我单击 1 个按钮(带表格的模式)时,它都会显示在所有徽章上。例如。我的第一行模式表中有 4 个用户。 #4 计数显示在我的所有徽章上。这很奇怪。我的目标是动态显示我的徽章中的计数。为了更好地解释,我在下面提供了视频和图片。
https://streamable.com/z6dqgi
这就是我的目标/目标。
查看:
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane fade show active" id="custom-tabs-two-all" role="tabpanel" aria-labelledby="custom-tabs-two-all-tab">
<table class="table">
<thead class="">
<tr>
<th scope="col"><i class="fas fa-hashtag"></i></th>
<th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
<th scope="col">Full Name</th>
<th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
<th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
<th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
<th scope="col">Level</th>
<th scope="col">balance</th>
<th scope="col">   Actions</th>
</tr>
</thead>
<tbody>
<?php
foreach($result as $rows) $uuid = $rows->uuid;
$userID = $rows->userID; ?>
<?php if($rows->uuid===$_SESSION['uid']): ?>
<tr>
<th><?php echo $rows->userID; ?></th>
<td><?php echo $rows->uuid; ?></td>
<td><?php echo $rows->firstname; ?> <?php echo $rows->lastname; ?></td>
<td><?php echo $rows->email; ?></td>
<td><?php echo $rows->mobile; ?></td>
<td><?php echo $rows->username; ?></td>
<td><?php echo $rows->account_type; ?></td>
<td><?php echo $rows->currentPoints; ?></td>
<td>
<button data-id="<?php echo $rows->userID; ?>" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
<i class="fas fa-hand-holding-usd mr-1"></i> <?php echo $rows->userID; ?>FUND
</button>
<button data-id="<?php echo $rows->userID; ?>" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
<i class="fas fa-users"></i>
<span data-id="<?php echo $rows->userID; ?>" class="badge badge-warning navbar-badge"></span>
</button>
</td>
</tr>
<?php else: ?>
<?php endif;?>
<?php ?>
</tbody>
</table>
</div>
<span class="badge badge-warning navbar-badge">2</span> //this is where the total value should be displayed.
</button>
型号:
public function view($userID = 0)
$this->db->select("*");
$this->db->from("users");
$this->db->where( "uuid=".$userID);
$query = $this->db->get();
return $result = $query->result();
控制器:
public function view()
if ($this->input->is_ajax_request())
$view_id = $this->input->post('view_id');
if ($post = $this->networks->view($view_id))
$data = array('responce' => 'success', 'post' => $post);
else
$data = array('responce' => 'error', 'message' => 'failed to fetch record');
echo json_encode($data);
else
echo "No direct script access allowed";
脚本:
<script>
$(document).ready(function()
$(".allTable").on("click", function()
var view_id = $(this).data('id')
$.ajax(
url: "<?=site_url('network/view')?>",
type: "post",
dataType: "json",
data:
view_id: view_id
,
success: function(data)
var tbody ="";
var item =data.post;
for(var key in item)
tbody +="<tr>";
tbody += "<td>"+item[key].userID+"</td>";
tbody += "<td>"+item[key].uuid+"</td>";
tbody += "<td>"+item[key].firstname+" "+item[key].lastname+"</td>";
tbody += "<td>"+item[key].email+"</td>";
tbody += "<td>"+item[key].mobile+"</td>";
tbody += "<td>"+item[key].username+"</td>";
tbody +="</tr>"
$(".navbar-badge").text(Object.keys(item).length);
$(".tbody").html(tbody);
$('#editModal').modal('show');
);
)
);
</script>
【问题讨论】:
您好,可以展示一下您的 html 表格吗? 您好,添加完毕。 【参考方案1】:当您使用.navbar-badge
时,这将针对具有该类的所有元素,这就是它更改所有跨度标签的原因。相反,由于您已经获得了按钮的data-id
,您可以使用它来使用$("span[data-id=" + view_id + "]").text("sometext")
来定位所需的范围。
演示代码:
$(document).ready(function()
$(".allTable").on("click", function()
var view_id = $(this).data('id')
/*$.ajax(
//somecodes of ajx ..
*/
// $("span[data-id="+view_id+"]").text(Object.keys(item).length);
$("span[data-id=" + view_id + "]").text(10);
// other codes ..
/*
);*/
)
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<table class="table">
<thead class="">
<tr>
<th scope="col"><i class="fas fa-hashtag"></i></th>
<th scope="col"><i class="fas fa-mobile-alt mr-2"></i>UUID</th>
<th scope="col">Full Name</th>
<th scope="col"><i class="fas fa-envelope-open-text mr-2"></i>Email</th>
<th scope="col"><i class="fas fa-phone-alt mr-2"></i>Contact Number</th>
<th scope="col"><i class="fas fa-at mr-2"></i>Username</th>
<th scope="col">Level</th>
<th scope="col">balance</th>
<th scope="col">   Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>
1
</th>
<td>
123
</td>
<td>
abc
</td>
<td>
a@gmail.com
</td>
<td>
12213
</td>
<td>
<button data-id="1" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
<i class="fas fa-hand-holding-usd mr-1"></i> FUND
</button>
<button data-id="1" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
<i class="fas fa-users"></i>
<span data-id="1" class="badge badge-warning navbar-badge"></span>
</button>
</td>
</tr>
<tr>
<th>
2
</th>
<td>
1232
</td>
<td>
abc2
</td>
<td>
a2@gmail.com
</td>
<td>
12213
</td>
<td>
<button data-id="2" class=" fundTable btn btn-success btn-sm text-bold " type="button" data-toggle="modal" data-target="#fundModal">
<i class="fas fa-hand-holding-usd mr-2"></i> FUND
</button>
<button data-id="2" class=" allTable btn btn-danger btn-sm text-bold" type="button" data-toggle="modal" data-target="#editModal">
<i class="fas fa-users"></i>
<span data-id="2" class="badge badge-warning navbar-badge"></span>
</button>
</td>
</tr>
</tbody>
</table>
【讨论】:
这是有效的。但是,我的目标是在访问页面时。徽章中的计数是自动可见的。只有点击表格后才能看到您的解决方案。谢谢。 您好,您当前提供的代码在 click event 之后显示该部分。在访问的页面上显示它们的代码在哪里?你也没有在你提出的问题中提到这一点。 是的。那是我的错。然而。我仍然会检查这个作为答案。并就我的主要目标发表另一篇文章。你的解决方案真的很有帮助。谢谢。以上是关于显示我的用户数量并将其显示在徽章上。 (代码点火器)的主要内容,如果未能解决你的问题,请参考以下文章