After starting searching, data table becomes frozen with a message "processing.." (see the image).
I am using server-side processing (see the javascript code)
$(document).ready(function () {
alert('doc');
$('#example').DataTable({
"processing": true,
"serverSide": true,
"searching": true,
"ordering": true,
"ajax": "index.php?r=patient/list",
});
});
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>phone</th>
<th>email</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>phone</th>
<th>email</th>
</tr>
</tfoot>
While searching an ajax call is made by data table return successfully with filtered data. It not displayed as shown in the screenshot.
The problem is with returned data. There is param called the 'draw' should be incremented with each response.
$draw = $_GET['draw'];
$draw = $draw + 1;
$jsondata["draw"] = $draw;
echo json_encode($jsondata);
Related
Once a button is selected on my page I need to iterate through a DataTable, find the row with the radio button that's selected and then get the value from a hidden column on that row. I've tried just about everything but my hidden columns aren't accessible, only my 3 visible columns. My code example has several of the options I've tried to I apologize if it's a little messy. This is my first time posting so please don't get mad if I've messed something up here. I've seen the .fnGetData option but it's listed as "legacy" so I'd rather not use it (???).
Table Setup:
var thisurl = '#Url.Action("Addresses", new { AddUID = "000" })';
thisurl = thisurl.replace("000", #ViewBag.AddUID);
$('##ViewBag.TblID').dataTable({
"columnDefs": [
{
"targets": [0, 1],
"visible" : false
}
],
"searching": false,
"info": false,
"paging": false,
"order": [1, "desc"],
"ajax": {
"type": "POST",
"url": thisurl,
"contentType": 'application/json; charset=utf-8',
"data": function (data) { return data = JSON.stringify(data); }
},
"columns": [
{ "data": "Adrs_UID" },
{ "data": "revision_id" },
{
"render": function (data, type, row) {
var url = '#Html.RadioButton("000", "select", false, htmlAttributes: new { #id = "111", onclick = "ResetRadioBtns()" })';
url = url.replace("000", '#ViewBag.ChkID').replace("111", '#ViewBag.ChkID');
return url;
}
},
{
"render": function (data, type, row) {
return row.Adrs_One + ' ' + row.Adrs_City + ' ' + row.Adrs_St + ' ' + row.Adrs_Zip;
}
},
{
"render": function (data, type, row) {
var text = 'Print';
var target = '_blank';
var link = '../DocGen/DocGen_AB.aspx?AUID=' + row.Adrs_UID + '&REV=' + row.revision_id;
return '' + text + '';
}
}
]
});
Script
$('.btnAPL_DTV').click(function (e) {
var table = $('#tblAPLAddress_DTV').DataTable();
table.rows().every(function (value, index) {
node = table.row(value).node();
var check = $(node).find("input[id$='chbxAPLAdSelect_DTV']");
var data1 = $('#tblAPLAddress_DTV').DataTable().row(this).data();
data = data1[0];
if (check.prop("checked") == true) {
// Get Rev_Id & Adrs_UID from Hiddent Field
var allData = table.row(index).data();
var revData = allData[0].data();
adrsUID = node.data()[0];
revId = node.data()[1];
}
});
});
UPDATE 08-13-2021
Andrew - Here the script code and my results from yesterday using your example (including using the index value so you can see what I did yesterday):
$("#tblAPLAddress_DTV").on("click", ":radio", function () {
var table = $('#tblAPLAddress_DTV').DataTable();
var rowNode = $(this).parent().parent()[0];
console.log("Result using .Adrs_UID: " + table.row(rowNode).data().Adrs_UID);
console.log("Result using Index Value: " + table.row(rowNode).data()[0]);
});
And here are my results displayed in the console:
Result using .Adrs_UID: undefined
Result using Index Value: <input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select">
I'm not sure which HTML you're referring to. Here's my HTML table set-up. #ViewBag.TblID = "tblAPLAddress_DTV":
<div class="row">
<div class="col-md-offset-1">
<table id=#ViewBag.TblID class="table text-nowrap" style="padding-top:1em">
<thead>
<tr>
<th>Address UID</th>
<th>RevisionID</th>
<th></th>
<th>Address</th>
<th>Address Block</th>
</tr>
</thead>
</table>
</div>
</div>
And I don't think this matters but I apologize if it does. My table HTML set-up and table definition script above are in a Partial View.
Here's the Html call in the Index View to call the PartialView:
#{ Html.RenderAction("_Addresses", "DocGeneration", new { id = "tblAPLAddress_DTV", chkId = "chbxAPLAdSelect_DTV", AddUID = ViewBag.AddUID });}
Hope this gives you the info you need.
UPDATE 2
Updated script:
$("#tblAPLAddress_DTV").on("click", ":radio", function () {
var table = $('#tblAPLAddress_DTV').DataTable();
var rowNode = $(this).parent().parent()[0];
console.log(rowNode);
});
Console results - I didn't drill down too far.
<tr role="row" class="odd">
<td class="sorting_1">
<input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select">
</td>
<td>17647 157TH STREET BONNER SPRINGS XX 66000</td>
<td>Print</td>
</tr>
These console results are the same as the HTML getting generated.
Thank you!
I have taken a simplified version of your table and code to show one possible approach:
$(document).ready(function() {
var table = $('#example').DataTable( {
"columnDefs": [
{
"targets": [0, 1],
"visible" : false
}
]
} );
$( "#example" ).on( "click", ":radio", function() {
var rowNode = $( this ).parent().parent()[0];
console.log( table.row(rowNode).data()[0] );
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>London</td>
<td>22</td>
<td>2012/03/29</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Milan</td>
<td>33</td>
<td>2008/11/28</td>
<td><input type="radio"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(In my case, the radio buttons are not cleared after each click, because I did not add that logic.)
How this works:
I use a delegated event handler:
$( "#example" ).on( "click", ":radio", function() { ... }
This allows events to be attached to radio buttons which may not initially be drawn - for example, if they are not on page 1 of the DataTable's paginated data.
I extract the row node (the <tr> element) using jQuery:
var rowNode = $( this ).parent().parent()[0];
In my case, the row node is the grandparent (.parent().parent()) of the radio button. Your case may be slightly different. I don't know what your final rendered HTML structure is.
In my case, each row of data is stored as an array of values (not as an object), so I can use the following to access the first hidden value:
table.row(rowNode).data()[0]
Note that the table variable was already defined as part of the DataTable declaration.
If your row data is provided as objects { ... } instead of arrays [ ... ], you will need to adjust your code accordingly.
You can log table.row(rowNode).data() to the console to see for yourself. You haven't shown us your JSON data, but it looks as if you would need to access the named values, such as adrsUID - so probably this:
table.row(rowNode).data().adrsUID
I'd like for my page to initially load with just a search box, and then when someone begins to search that is when the table appears.
My example table is below:
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="none">Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test 1</td>
<td>Test test test</td>
<td>ABC</td>
</tr>
<tr>
<td>Test 2</td>
<td>Test test test</td>
<td>DEF</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test test test</td>
<td>GHI</td>
</tr>
</tbody>
</table>
yes it can be done using ajax call and i suppose you use php.
For example, you can generate a table everytime you press any char, populating the table with the results or using a button to search the keyword you type on the input field.
Example with ajax and php:
var search_string = $('#id_of_the_input_box').val();
$.ajax({
url:"php_file.php",
method:"POST",
data:{action:action},
dataType:"json",
success:function(data){
console.log(data);
}
and the php code using PDO
$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
$result = '
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
});
});
<table id="example" class="display" style="width:100%">
YOUR TABLE ROWS HERE
</table>
';
// foreach loop to populate the table example
foreach ($query_results as $row) {
$result.= '
<tr>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
'
} else {
echo "No results";
}
}
// echo the generated table as ajax response
echo $result;
Hope you have caught the idea with this example.
I'm trying to add a jQuery data table in Salesforce lightning component. Here is the code. It is not loading at all. What am I doing wrong?
<ltng:require scripts="{!join(',','//cdn.datatables.net/1.10.4/css/jquery.dataTables.css'
,'//code.jquery.com/jquery-1.12.4.js'
,'//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js'
,'//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js'
,'//cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js')}"
afterScriptsLoaded="{!c.afterscriptsLoaded}"/>
<table id="showContacts" class="slds-table slds-table--bordered slds-table--cell-buffer">
<thead>
<tr class="slds-text-title--caps">
<th class="slds-is-sortable slds-text-title--caps">
<span class="slds-truncate" title="EID">EID</span>
</th>
<th class="slds-is-sortable slds-text-title--caps">
<span class="slds-truncate" title="Name">Name</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">
<div class="text-wrap">10887738</div>
</td>
<td>
<div class="slds-truncate text-wrap" title="Adam Will">Adam, Will</div>
</td>
</tr>
</tbody>
</table>
({
afterscriptsLoaded : function(component,event,helper){
j$('[id$="showStudents"]').DataTable({
"scrollY": "260px",
"scrollCollapse": true,
"paging": true,
"searching": true,
"ordering": true,
"info": true,
"dom": 'Bfrtip',
"buttons": [
'copy',
{extend: 'csv',title: 'Criteria export'},
{extend: 'excel',title: 'Criteria export'},
{extend: 'pdf',title: 'Criteria export'},
'print'
]
} );
},
})
My question is about how to show this table on lightning component in Salesforce? Whenever I load the page I see a blank page.
Note: I am showing a sample table.
I have set a bootstrap table with the filter control extension. The table where I want to filter offers many popovers and tooltips. However, they stop working after filtering. What can I do to re-activate them?
An example of my code can be seen here (Location Type "Other" should have a popover, this works only before filtering for the first time):
<table ref="mainTable" class="table table-striped table-bordered table-hover"
cellSpacing="0" id="mainTable" data-show-toggle="true"
data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="CustomerName" data-sortable="true" data-filter-control="select">Customer Name</th>
<th data-field="LocationType" data-sortable="true">Location Type</th>
<th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Cap Corp</td>
<td>Main</td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Cap Corp</td>
<td><a class="ajaxPopover">Other</a></td>
<td>Norwalk CT 06851</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td>Main</td>
<td>Slough SL1 4DX</td>
</tr>
<tr>
<td></td>
<td>Tel</td>
<td><a class="ajaxPopover">Other</a></td>
<td>London W1B 5HQ</td>
</tr>
</tbody>
</table>
... with the following javascript code:
$('#mainTable').bootstrapTable({
});
// Add some popovers
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
http://jsfiddle.net/7bpLrafx/4/
Thanks for any help!
You have to reinitialize popovers when changes are made in the table (like sorting, change of display and so on).
JS:
$('#mainTable').on('all.bs.table', function () {
$('.ajaxPopover').popover({
html: true,
placement: "auto right",
container: 'body',
content: "<b>Text</b> Other Text"
});
});
You can use Bootstrap's built-in functionality to reinitialize the popovers after table filtering in DOM:
$('#mainTable').on('post-body.bs.table', function () {
$('.ajaxPopover').popover();
});
I have this DataTable:
<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
I want to fill the table with data, using AJAX call. I have the following AJAX code:
function SearchResult(){
$.ajax({
url: 'php/search.php,
type: 'get',
data: $("#form_search").serialize(),
dataType: 'json',
success: function (data) {
if (data.success) {
$("#tabela_1 > tbody").html("");
$.each(data, function (index, record) {
if ($.isNumeric(index)) {
var row = $("<tr />");
$("<td />").text(record.ID).appendTo(row);
$("<td />").text(record.name).appendTo(row);
row.appendTo('#tabela_1');
}
});
}
}
});
}
At this point I get the table filled (after calling the SearchResult() function).
But, when I press the table column to sort that column, all the data disappear. The same happens when I use the table search box.
I've tried to use the fnDraw() and fnUpdate() but with no effect.
It's not recommended to use <tr>/<td> nodes to add data to the table, use appropriate DataTables API methods instead, for example row.add().
JavaScript:
success: function (data) {
var table = $("#tabela_1").DataTable();
if (data.success){
table.clear();
$.each(data, function (index, record){
if ($.isNumeric(index)) {
table.row.add([record.ID, record.name]);
}
});
table.draw();
}
}
HTML:
<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
</table>