We Keep Coding

DataTable Column Filtering Not Pulling in Values

I am working in Modern SharePoint and have a web-part installed that allows me to inject code directly into the page. I have built this code to allow me to use a DataTable to pull information from a List I have on that site.
I am having trouble with the filters for the columns as they appear to not be pulling in any values at all. I believe this is due to me calling the data for the table after the DataTable has been created. But I also reference the table in the code to get the data for the table after it is declared. Can someone please take a look at my code and see if there is a way for this to be done?
Any help would be appreciated!
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Image</th>
<th>Title</th>
<th>Industry</th>
<th>Market</th>
<th>Description</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Image</th>
<th>Title</th>
<th>Industry</th>
<th>Market</th>
<th>Description</th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"
/>
<script>
var dataTable;
$(document).ready(function () {
dataTable = $('#example').DataTable({
initComplete: function () {
this.api()
.columns([2, 3])
.every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
column
.data()
.unique()
.sort()
.each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
}
});
$.ajax({
url:
"https://ewscripps.sharepoint.com/sites/lighthouseideas/_api/web/lists/getbytitle('Site%20Pages')/items?$select=FileLeafRef,Title,Industry,Market,Description,PageType&$filter=TaxCatchAll/Term eq 'Station Initiatives'",
headers: {
accept: 'application/json;odata=verbose',
'content-type': 'application/json;odata=verbose',
'X-RequestDigest': jQuery('#__REQUESTDIGEST').val()
},
success: function (data) {
console.log('issued URL Request');
//Get Success Stories
for (var i = 0; i < data.d.results.length; i++) {
console.log('Found: ' + data.d.results[i].Title);
dataTable.row
.add([
"<img src='https://ewscripps.sharepoint.com/sites/lighthouseideas/_layouts/15/getpreview.ashx?path=SitePages/" +
data.d.results[i].FileLeafRef +
"'>",
data.d.results[i].Title,
data.d.results[i].Industry.results,
data.d.results[i].Market.results,
data.d.results[i].Description
])
.draw(false);
}
console.log(data.d.results[4]);
console.log(data.d.results[9]);
dataTable.draw(true);
}
});
});
</script>

This should be related to databind after DataTable init, try to update the init with data, in your case, it's success function.
You could check my previous tested thread here.

All JavaScript file doesn't load all data table pages

I am using data table with materialize css. In a specific column I make my won control.I mean I make a drop down option for changing the column cell. It works well in first page of data table. But after first page it doesn't work. I search about this problem on google but I can't find any solution that work for me.
Here is my html code:
<table id="data-table-simple" class="bordered striped highlight responsive-table">
<thead>
<tr>
<th>Guest name</th>
<th>Guest email</th>
<th>Reff</th>
<th>Reciept</th>
<th>Status</th>
<th>Payment date</th>
<!-- <th>Photo</th> -->
</tr>
</thead>
<tbody id="show_data"></tbody>
</table>
Here is my jQuery code:
$(document).ready(function(e){
$('#data-table-simple').DataTable();
show_payment();
});
function show_payment(){
$.ajax({
type : 'post',
url : 'payment/get_all_payment',
async : false,
dataType : 'json',
success : function(data){
// console.log(data);
var html = '';
var i;
var status;
var base_url = window.location.origin;
var pathArray = window.location.pathname.split( '/' );
for(i=0; i<data.length; i++){
var image_location = base_url+'/'+pathArray[1]+'/'+pathArray[2]+'/images/payment_reciept/'+data[i].payment_receipt;
html += '<tr>'+
'<td>'+data[i].name+'</td>'+
'<td>'+data[i].email+'</td>'+
'<td>'+data[i].reff+'</td>'+
'<td><img class="materialboxed" width="100" height="90" src="'+image_location+'" alt=""></td>'+
'<td>'+
'<select name="select_room_type">'+
'<option value="" disabled selected>'+data[i].status+'</option>'+
'<option value="confirmed">Confirmed</option>'+
'<option value="cancel">Cancel</option>'+
'</select>'+
'</td>'+
'<td>'+data[i].created_date_time+'</td>'+
'</tr>';
}
$('#show_data').html(html);
}
});
}
Here is my output for first page in data table
Here all code and JavaScript function is working well
Here is my output for second page in data table
Here the JavaScript code doesn't work.
Now please help me how I can solve the problem.

appending <tr> dynamically as per the database output using AJAX

I am trying to attach multiple rows dynamically ( as per the results fetched from the database) to the existing table.
my html code
<table width="100%" border="1" class="queriedResponders">
<tbody>
<tr>
<th><strong>Select</strong></th>
<th><strong>Responder Name</strong></th>
<th><strong>Responder Company</strong></th>
<th><strong>Responder Number</strong></th>
<th><strong>City</strong></th>
<th><strong>Distance(Km)</strong></th>
</tr>
</tbody>
</table>
my jQuery code
$.ajax({
data: data,
url: url,
type: 'POST',
datatype: 'JSON',
success: function (response) {
console.log(response);
var result = $.parseJSON(response);
var count = result.length;
for (var i = 0; i < count; i++) {
var $row = $("<tr><td><input type='radio' name='assignRadio'></td><td>" + result[i].name + "</td><td> Murgency Global Network</td><td>" + result[i].number + "</td><td>" + result[i].city + "</td><td> 0.5 Km</td></tr>");
$('table.queriedResponder > tr:last').append($row);
}
console.log($row);
}
});
});
Please note :- I am getting the desired result as I have console logged the output which is a JSON object like 1 pasted below
[{"name":"mihir panchal","company":"","number":"00919664804737","city":""}]
Please guide me as to where am I making the mistake

2 things:
You are not referencing the correct element. Your table has a class of queriedResponders, and you are targeting queriedResponder
You should be append to the tbody instead of the tr
Both of those things combined results in this:
$('table.queriedResponders tbody:last').append($row);
I've simplified the response to get a working example:
var result = [{
"name": "mihir panchal",
"company": "",
"number": "00919664804737",
"city": ""
}];
var count = result.length;
for (var i = 0; i < count; i++) {
var $row = $("<tr><td><input type='radio' name='assignRadio'></td><td>" + result[i].name + "</td><td> Murgency Global Network</td><td>" + result[i].number + "</td><td>" + result[i].city + "</td><td> 0.5 Km</td></tr>");
$('table.queriedResponders tbody:last').append($row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1" class="queriedResponders">
<tbody>
<tr>
<th><strong>Select</strong></th>
<th><strong>Responder Name</strong></th>
<th><strong>Responder Company</strong></th>
<th><strong>Responder Number</strong></th>
<th><strong>City</strong></th>
<th><strong>Distance(Km)</strong></th>
</tr>
</tbody>
</table>

You are appending the new row to the last tr while you want to append it in <tbody>
so you should replace it with
$('table.queriedResponders > tbody:last-child').append($row);
or if you want to use your last <tr> you may use .after() instead of .append() to add the new row after your last row
$('table.queriedResponders tr:last').after($row);
Solution1: Working Demo
Solution2: Working Demo

Add a <tr> element to dynamic table, dynamically without a page refresh, php jquery

I am trying to add a dynamic row to the existing table on click of button, whose rows are dynamically created using output from PHP script.
I doing an ajax call to the script insert_tr.php which returns me a TR element in the same format as the existing table with the data.Data is returned appropriately
But unfortunately, the <tr> row is not being added to the table dynamically but adds only after a page refresh.
PHP file code :
<div id="v_div">
<table class="table table-bordered table-striped" >
<thead>
<th class='col-md-2'>name</th>
<th class='col-md-2'>number</th>
</thead>
<tbody>
<?php
while ($data = pg_fetch_assoc($ret)) {
echo
"<tr id=tr_".$data['sr_number'].">
<td class='td_topic' id=title:".$data['number']." >".trim($data['name'])."</td>
<td class='td_topic' id=title:".$data['number']." >".trim($data['number'])."</td>
<td class='td_topic' id=title:".$data['number']." ><button class='btn btn-info check1' type=button title='Add Entry'>Add Entry</button></td>
</tr>";
?>
</tbody>
</table>
</div>
Javascript :
$(document).ready(function() {
$("#v_div").on('click', '.check1', function() {
var field_userid = $(this).parent().attr("id");
var value = $(this).text();
$.post('insert_tr.php', field_userid + "=" + value, function(data) {
if (data != '') {
$(this).closest("tr").after(data);
}
});
});
});
All I want to do is add the row immediately after the current TR am on ,dynamically without a page refresh, which serves the ultimate use of an ajax call.

The reference to this is not the button that was clicked.
$(this).closest("tr").after(data);
Store a reference to the row outside the Ajax call.
$(document).ready(function() {
$("#v_div").on('click', '.check1', function() {
var field_userid = $(this).parent().attr("id");
var value = $(this).text();
var row = $(this).closest("tr");
$.post('insert_tr.php', field_userid + "=" + value, function(data) {
if (data != '') {
row.after(data);
}
});
});
});

Creating table from API

My function is pulling information from an api and then putting it into the table. For some reason this function is not working.
this is my function:
function getPayInfo(socCode) {
var apiurl = "http://api.lmiforall.org.uk/api/v1/ashe/estimatePay?soc=";
var apicall = apiurl + socCode;
$.get(apicall, function(data) {
$("#Pay tbody").html("");
$.each(data.years, function(i, e) {
var tablerow = $("<tr></tr>");
tablerow.append("<td>" + e.year + "</td>");
tablerow.append("<td>" + e.estpay + "</td>");
$("#Pay tbody").append(tablerow);
});
});
}
and this is the table I am putting it into:
<div class="well table table-stripped">
<h4>Pay Information</h4>
<h5>Pounds per Week</h5>
<table id="Pay">
<thead>
<tr>
<th>Year</th>
<th>Estimate Pay</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I expected it to return a year and data value into the table. if you take the url in the function and add a certain 4 figure value (the socCode) (e.g. 5113) to the end it will give the data online this should then be returned to the table body.

Have you debugged/examined the data structure inside your $.get callback? It looks to me that your access method is incorrect. When I access your example url, I get the following data back:
{
"soc":5113,
"series":[
{
"year":2012,
"estpay":340
}
]
}
I think you want your iterator to be this instead:
// there is no data.years
$.each(data.series, function(i, e) {
...
This should make your e param be of the form {year: 2012, estpay: 340}, which appears to be what you want to interpret it as.