Develop Reference

Adding jquery 'each' function to js function

I have a datatable and there is a 'amount' column. I have a js function to seperate thousand and add currency mark to each amount in the table. However the function is not working on "each" row but only works on first row. When I google it, I understand that I need to add this function in a jquery each function. Could you help me about how to make this happen?
function numberWithCommas(x) {
return "₺"+x.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
var val = parseInt($('#tutar').text());
//Use the code in the answer above to replace the commas.
val = numberWithCommas(val);
$('#tutar').text(val);
<table class="table table-bordered" id="Piyasa" width="100%" cellspacing="0">
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Şirket</th>
<th scope="col">Alcaklı</th>
<th scope="col">Borçlanma Tarihi</th>
<th scope="col">Ödeme Tarihi</th>
<th scope="col">Tutar</th>
<th scope="col">Açıklama</th>
<th scope="col">Bilgi Güncelle</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5" style="text-align:right" >Toplam:</th>
<th></th>
<th></th>
</tr>
</tfoot>
<tbody>
{% for musteri in piyasa %}
<tr>
<th scope="row">{{musteri.id}}</th>
<td>{{musteri.sirket}}</td>
<td>{{musteri.alici}}</td>
<td>{{musteri.borc_tarih}}</td>
<td>{{musteri.odeme_tarih}}</td>
<td id="tutar">{{musteri.tutar|floatformat:2}}</td>
<td>{{musteri.aciklama}}</td>
<td>Güncelle</td>
</tr>
{% endfor %}
</tbody>
</table>

The first thing you should do is not re-use the same id for multiple elements on the page, which you're doing inside your server-rendered loop building up table rows.
Instead use a class, and then use that class to target all the matching elements. In the example below I have used the class format-number to indicate any cell I want to run the formatting code on.
function numberWithCommas(x) {
return "₺" + x.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
$(".format-number").each(function(){
const $this = $(this);
const currentVal = parseFloat($this.text());
$this.text( numberWithCommas(currentVal) );
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td class="format-number">10101.23</td>
</tr>
<tr>
<td class="format-number">345678.56</td>
</tr>
<tr>
<td class="format-number">123456789.45</td>
</tr>
</table>

Laravel Pagination method is getting only the specfic number of row from db,not getting all the data

I am trying to add a pagination in my data table.but when I use pagination(25) ,it only bring 25 rows from the db and show total number to entity is 25. there is no 2|3|4|Next buttons to go to the next data.It does not bring all the data from the db and does not paginate them.
blade:
<table id="example1" class="table table-bordered table-hover">
<thead>
<tr>
<th>SL</th>
<th>Date</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach($leads_list as $data){
$i++;
?>
<tr>
<td><?php echo $i;?></td>
<td>
{{$data->created_at}}
</td>
<td>
{{$data->title}}
</td>
</tr>
<?php } ?>
</tbody>
</table>
javascript:
$(function () {
$("#example1").DataTable({
"pageLength": 100,
"responsive": true,
"autoWidth": false,
});
});
controller:
$leads_list = DB::table('leads')
->paginate(15);
return view("leads.index", compact('leads_list'));
want to get all the data from db and show them in table with 15data in each page.
but it only bringing 15 rows from db,and there is no pagination.
but if i use ->get(); it works fine.but page gets slow.

Firstly with a blade template there is no need to use <?php ?> tags, and to answer your question you have to display the pagination links:-
Your new blade file:-
<table id="example1" class="table table-bordered table-hover">
<thead>
<tr>
<th>SL</th>
<th>Date</th>
<th>Title</th>
</tr>
</thead>
<tbody>
#foreach ($leads_list as $list_item)
<tr>
<td>{{ $loop->index }}</td>
<td>{{ $list_item->created_at }}</td>
<td>{{ $list_item->title }}</td>
</tr>
#endforeach
</tbody>
</table>
{{ $leads_list->links() }}

Please take a look at the documentation.
https://laravel.com/docs/7.x/pagination#displaying-pagination-results.
You will have to add the pagination links to your blade file.
{{$leads_list->links()}}, this creates 1,2,3 etc. page links, so that you can switch between the paginated pages.
If you aren't using blade files, you can add following code to your view:
<?php echo $leads_list->render(); ?>

Passing the variable in the url in HTML

I am using the HTML and Javascript for an application which I built. I am using onlclick function,when I click the button it should take me to the new page.
function editStudent(studentId) {
console.log(studentId);
document.location.href = '/student/edit/{{studentId}}' {
{
studentId
}
}
}
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for each_student in result %}
<tr>
<td>{{ each_student.student_id }}</td>
<td>{{ each_student.studnet_role }}</td>
<td><input class="btn btn-info" type="button" onclick="editStudent('{{each_student.student_id}}')" id="edit" value="Edit"></td>
</tr>
{% endfor %}
</tbody>
</table>
When I click the edit button it goes to the new page with this url http://localhost:6464/student/edit/,
What my expected output is
/student/edit/studentid(studentid value has to be printed for example if it's 1,it should be student/edit/1)

if you do concatenation it may work.
document.location.href = '/student/edit/'+ studentId

In this case, studentId is being passed to the function as a Javascript variable, but you're treating like if it was still inside the loop, using {{studentId}}. Just use Javascript concatenation:
document.location.href = '/student/edit/' + studentId;

Refere this answer,
Some of code removed because {% for each_student in result %} will not work here.
You are passing studentId to javascript, so just use that variable in javascript function.
function editStudent(studentId) {
console.log(studentId);
location = '/student/edit/' + studentId;
}
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student role</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>student_id</td>
<td>studnet_role</td>
<td><input class="btn btn-info" type="button" onclick="editStudent(1)" id="edit" value="Edit"></td>
</tr>
</tbody>
</table>

After adding new <tr> to table the searching/sorting functionality has broke

I am using a bootstrap admin preset theme and having trouble with their table functionality. Previously the table would display a searching function in the top right and allow you to sort the table by rows. I added a new table row for each entry in to the table and it broke this functionality. It has nothing to do with the 'hide' or 'show' on the second row but simply the addition of the second row for each entry. I had a brief browse around and think it has something to do with the number of elements in each row of the table that the search is trying to run on and there being a mismatch.
Is there any way I can still implement searching/sorting even after adding a second row to my table?
The code is as follows:
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Session Name</th>
<th>Provider</th>
<th>Status</th>
<th>Pricing Type</th>
<th>Subscription Type</th>
<th>JIRA Number</th>
<th>Accept Port</th>
<th>IP Addresses</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Session Name</th>
<th>Provider</th>
<th>Status</th>
<th>Pricing Type</th>
<th>Subscription Type</th>
<th>JIRA Number</th>
<th>Accept Port</th>
<th>IP Addresses</th>
</tr>
</tfoot>
<tbody>
{% for item in session_details %}
<tr onclick = "rowClick(this)">
<td>{{ item.session_name }}</td>
<td>{{ item.client_name }}</td>
<td>{{ item.current_status }}</td>
<td>{{ item.pricing_type }}</td>
<td>{{ item.subscription_type }}</td>
<td>{{ item.jira }}</td>
<td>{{ item.accept }}</td>
<td>
{% for ips in item.IP_Addresses %}
<li>{{ ips.ip_addr }}</li>
{% endfor %}
</td>
</tr>
<tr bgcolor="#f8f9fa">
<td colspan="8">
{% for notes in item.Notes %}
<p><b>Note: </b>"{{ notes.note }}"</p><p><small><strong> Time of entry: </strong><i>{{notes.time_now}}</i></small></p>
{% endfor %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
function rowClick(x)
{
var content = $(x).text().split('\n')[1];
console.log(content);
}
</script>
<script>
$( document ).ready(function()
{
console.log("ready!");
$("td[colspan=8]").find("p").hide();
$("table").click(function(event) {
event.stopPropagation();
var $target = $(event.target);
if ( $target.closest("td").attr("colspan") > 1 )
{
$target.slideUp();
} else
{
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>
</div>
The error message that is produced in the developer console:
Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

$.click() is a function that can't be used with new elements. It is initialized when the document is ready.
To use a function click with dynamic elements, use the function $.on('click', () => {}) http://api.jquery.com/on/

Hide all table rows except clicked row AngularJS

I have a table that is populated with ng-repeat. When the row is clicked I am retrieving the data related to the object with ng-click. The table is populated with a json file. How can I hide all of the other rows of the table when the selected row is clicked?
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody style="cursor: pointer" ng-cloak> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
<tr ng-repeat="person in people" ng-click="getSelected(person);">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
<script>
angular.module("App", []).controller("MainController", function ($scope) {
$scope.people = peopleData;
$scope.getSelected = function (person) {
$scope.selected = person;
};
});
</script>

Try adding the following to your <tr>. It basically says, hide this row if there is a selection and that selection isn't the current person being iterated over.
ng-hide="selected && selected !== person"

You could just set an ng-hide value on unselected rows when a selected value has been set:
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody style="cursor: pointer" ng-cloak ng-repeat="person in people"> <!--When the row is clicked, I want to hide all other rows except the clicked one.-->
<tr ng-hide="selected!==null && person!==selected" ng-click="getSelected(person);">
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
<td>{{ person.age }}</td>
</tr>
</tbody>
</table>
<script>
angular.module("App", []).controller("MainController", function ($scope) {
$scope.people = peopleData;
$scope.selected = null;
$scope.getSelected = function (person) {
$scope.selected = person;
};
});
</script>
You will also probably want to move the ng-repeat as I did in the code above.