Is there an efficient jQuery way in a "legacy" datatable to find a td containing my search value and then crawl up to the row tr?
I can use $('#modalTable tbody').dataTable()[0].rows to get all rows and then loop through all rows but would prefer a more efficient method if there is one.
Here is a screen capture of what I have tried based on information I found on similar questions:
I've expanded all the values in the Watches. This screen capture is amazingly small! You may need to save the image to see it better.
One thing that may be important is that this table is created in a popup. I want to find the rows while the popup is opening but the data is already loaded into the table. Here is the code:
// Intitializes the select building table with new data
// and resets the DOM every time the "Add" button is clicked.
initSelectableBuildingTable = function () {
//If table exists destroy and reinitialize
var is_table = isDataTable(jQueryVar.jSelectableBuildingTable)
if (is_table) {
resetDatatable(jQueryVar.jSelectableBuildingTable);
}
jQueryVar.jSelectableBuildingTable.dataTable({
"bPaginate": false,
"bProcessing": true,
"bAutoWidth": true,
"aoColumns": [
{
"mDataProp": "Id", "bSortable": false, "mRender": function (data, type, row) {
var sHtml = '<input type="button" class="button small addSelectedBuilding" value="Add" data-id="' + row.AssetId + '"/>'
return sHtml;
},
"bUseRendered": false,
"sDefaultContent": ""
},
{ "mDataProp": "AssetName", "bSortable": true },
{ "mDataProp": "SqFoot", "bSortable": true },
{ "mDataProp": "Uid", "bSortable": true },
{ "mDataProp": "Category", "bSortable": true },
{ "mDataProp": "Location", "bSortable": true }
],
"aoColumnDefs": [
{ "mDataProp": null, "sDefaultContent": " ", "aTargets": [-1] }
],
"sDom": '<"top">rt<"bottom"><"clear">',
"oLanguage": {
"sEmptyTable": "No Meters found."
},
"sAjaxSource": $.baseURL("api/service/getassetsbyids"),
"fnServerData": function (sSource, aoData, fnCallback) {
var ids = stateMap.selectedSiteIds.toString();
var oData = { "ids": ids, "type": stateMap.selectedAssetType.toLowerCase() };
$.ajax({
url: sSource, // Do not add the base to this. It should already be present
type: "GET",
data: oData,
dataType: "json",
success: fnCallback,
complete: function () {
if (Info.model.getItemCount() > 0) {
disableAddButtonForSelectedItems();
}
}
});
}
});
}
Maybe there is some awesome cool thing that will allow me to find the the dt value and crawl up to the row.
You can use the :contains selector in jquery:
$('td:contains(Another option)').parent('tr').css('background', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>This is my text</td>
<td>Some other text</td>
</tr>
<tr>
<td>Another option</td>
<td>This is what I'm looking for</td>
</tr>
<tr>
<td>And some row</td>
<td>Note this Another option row</td>
</tr>
</table>
But Note as in my example, it's not an exact match. It's "contains" match.
If you want to change it to exact match you can use something like that:
var content_to_search = 'Another option'
$(`td:contains(${content_to_search})`).each(function() {
if ($(this).text() == content_to_search) {
$(this).parent('tr').css('background', 'red');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>This is my text</td>
<td>Some other text</td>
</tr>
<tr>
<td>Another option</td>
<td>This is what I'm looking for</td>
</tr>
<tr>
<td>And some row</td>
<td>Note this Another option row</td>
</tr>
</table>
OK. I was close. You can click on the image to see just how close. Technically, Dekel's answer is the correct answer, so I'm going to give the points to that answer here. But I'm posting this answer just-in-case someone else finds themselves as confused as I was.
I was trying to get the row and then perform whatever action I wanted on it (WRONG!), which may still be possible but I found the better way that I was looking for.
This is the code that does what I wanted:
var ids = []; // These will come from user selection
ids.forEach(function (id)
jQueryVar.jBuildingTable.find('tr input[data-id="' + id + '"]') // Find row
.prop("disabled", true).addClass('secondary'); // perform action
Happy coding!
Related
Trying to get my ajax to load into data tables. I want to load 2 tables from the same ajax call but I can't even get 1 to load first. Let's get some snippet action going...
$(function() {
$("#tablepress-1").DataTable({
ajax: {
url: '/api/?action=getStats',
dataSrc: 'data',
"deferRender": true
},
"columns": [{
"instances": "Strategy"
},
{
"instances": "Exchange"
},
{
"instances": "Trades"
},
{
"instances": "PL"
},
{
"instances": "Uptime"
}
]
})
})
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="tablepress-1" class="tablepress tablepress-id-1">
<caption style="caption-side:bottom;text-align:left;border:none;background:none;margin:0;padding:0;">Edit</caption>
<tbody>
<tr class="row-1">
<td class="column-1">Strategy</td>
<td class="column-2">Exchange</td>
<td class="column-3">Trades</td>
<td class="column-4">PL</td>
<td class="column-5">Uptime</td>
</tr>
</tbody>
</table>
Since stack snippets don't support ajax data, I'll paste it here:
{"success":true,"data":{"instances":[{"Strategy":"...","Exchange":"...","Trades":"...","PL":"...","Uptime":"..."}],"trades":[{"Open":"...","Strategy":"...","Exchange":"...","Direction":"...","Size":"...","PL":"...","Close":"...","ID":"..."}]},"meta":{"botOnline":true,"threadCount":0,"balance":0.0028}}
Right now I just have my script outputting ... for each field. What happens is that the table headings disappear and no data ever gets loaded into the table.
I tried setting up a fiddle with the data source but it's my first time trying to use the echo feature. Maybe someone else knows how to do that: https://jsfiddle.net/Trioxin/kjhtn7wm/6/
I can't imagine what's wrong here. I thought I specified the json format properly but it appears not.
Regarding cross domain AJAX sources in jsfiddles you can use http://myjson.com
Your "table headings" disappear because they are not table headings. They are just a <tbody> row that will be removed as soon DataTables get some data. Do this instead:
<thead>
<tr class="row-1">
<th class="column-1">Strategy</th>
<th class="column-2">Exchange</th>
<th class="column-3">Trades</th>
<th class="column-4">PL</th>
<th class="column-5">Uptime</th>
</tr>
</thead>
You must either pass an array of objects or point to the path of that array, like dataSrc: data.instances. You could also have dataSrc: function(data) { return data.data.instances }
You define which object property that should be mapped into which column through the data option like { data: "Strategy" }:
columns: [
{ data: "Strategy" },
{ data: "Exchange" },
{ data: "Trades" },
{ data: "PL" },
{ data: "Uptime" }
]
forked fiddle -> https://jsfiddle.net/hfc10sxt/
I have a table that I am using jQuery Datatables with.
Picture:
Scenario:
As you can see in the picture, there is a Delete link. When that link is clicked, a modal pop-up will show asking the user if they really want to delete that item. If yes, delete.. if no.. cancel out of the modal.
What I want:
When a user decides to delete an item and confirms it.. I would like to change the status of that item to "Deleted", via ajax. I am able to change the value, but that value does not show in the table. I have researched this for a couple of days now, but nothing seems to work.
My Code
<table id="Item-Table" class="table table-bordered">
<thead>
<tr>
<th class="text-center">
#Html.DisplayNameFor(model => model.AssetTag)
</th>
<th class="text-center">
#Html.DisplayNameFor(model => model.codeMakeModel.MakeModel)
</th>
<th class="text-center">
#Html.DisplayNameFor(model => model.codeStatu.Status)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr class="text-center">
<td>
#Html.ActionLink(item.AssetTag, "Edit", new { id = item.Id })
</td>
<td>
#Html.DisplayFor(modelItem => item.codeMakeModel.MakeModel)
</td>
<td class="changeStatus">
#Html.DisplayFor(modelItem => item.codeStatu.Status)
</td>
<td>
Delete
</td>
</tr>
}
</tbody>
</table>
#section scripts{
<script>
var settings = {};
settings.baseUri = '#Request.ApplicationPath';
var infoGetUrl = "";
if (settings.baseUri === "/projectonservername") {
infoGetUrl = settings.baseUri + "/api/itemsapi/";
} else {
infoGetUrl = settings.baseUri + "api/itemsapi/";
}
$(document).ready(function () {
var itemsTable = $("#Item-Table").DataTable({
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [3] },
{ "bSearchable": false, "aTargets": [3] }
]
});
$("#Item-Table").on("click",
".js-item-delete",
function() {
var link = $(this);
bootbox.confirm({
title: "Delete Item?",
message: "Are you sure you want to delete this item?",
buttons: {
cancel: {
label: '<i class="fa fa-times"></i> Cancel'
},
confirm: {
label: '<i class="fa fa-check"></i> Confirm'
}
},
callback: function(result) {
if (result) {
toastr.options = {
timeOut: 5000
}
$.ajax({
url: infoGetUrl + link.data("item-id"),
method: "DELETE",
success: function (result) {
//itemsTable.cell(itemsTable.row(this), 2).data("Deleted");
//itemsTable.draw();
//itemsTable.reload();
console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());
itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data("Deleted").draw();
console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());
toastr.success("Item successfully deleted");
},
error: function(jqXHR, textStatus, errorThrown) {
var status = capitalizeFirstLetter(textStatus);
console.log(jqXHR);
toastr.error(status + " - " + errorThrown, "Sorry, something went wrong.");
}
});
}
}
});
});
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
})
</script>
}
What I am Receiving
In the above code, specifically these lines:
console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());
itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data("Deleted").draw();
console.log(itemsTable.cell(itemsTable.row(this), $('.changeStatus')).data());
I am logging the value of the cell before I update that cell value, then changing the cell value, then logging the new/updated cell value.
Here is what I am receiving in the console:
But the table is not updating, or rather.. redrawing itself to show deleted.. the only way for it show deleted is to refresh the page which defeats the purpose of ajax..
How do I get the table to update the cell value without a page refresh?
Any help is appreciated.
I was able to answer this myself with some help of DavidDomain in the comments.
He suggested that I could possibly be selecting an incorrect row. So that gave me the idea to get the row at the start of this by adding:
$("#Item-Table").on("click",
".js-item-delete",
function() {
var link = $(this);
var row = $(this).parents("tr"); // get row element
Then set the cell data using that variable like so:
itemsTable.cell(itemsTable.row(row), $('.changeStatus')).data("Deleted").draw();
This worked and successfully drew the table with the updated value.
I've seen a lot of questions about this, however I cannot seem to get it working.
I have a datatable but I cannot get it to work. I use python-flask with bootstrap and I change a pandas dataframe to a html table with to_html().
<table width="100%" class="table table-striped table-bordered table-hover dataTable" id="dataTables-example"><thead>
<tr style="text-align: right;">
<th>id</th>
<th>user</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
and at the bottom of the body I have:
<script>
$(document).ready(function() {
$('#dataTables-example').DataTable({
"bDestroy": true,
"deferRender": true,
"columns": [
{ "data": "id" },
{
"data": "weblink",
"render" : function(data, type, row, meta){
if(type === 'display'){
return $('<a>')
.attr('href', data)
.text(data)
.wrap('<div></div>')
.parent()
.html();
} else {
return data;
}
}
}
]
});
});
</script>
I've looked at a lot of awnsers however they all contain the data as json in the javascript while my data is already in the html.
Use columnDefs when you have a DOM <table> and only need to target one or few columns :
$('#dataTables-example').DataTable({
destroy: true,
deferRender: true,
columnDefs: [{
targets: 0, //<-- index of column that should be rendered as link
render : function(data, type, row, meta){
if (type === 'display'){
return $('<a>')
.attr('href', data)
.text(data)
.wrap('<div></div>')
.parent()
.html();
} else {
return data;
}
}
}]
})
It works here -> http://jsfiddle.net/j9ez0sbj/
You have 3 columns in your html table but only define 2 columns in your initialization.
From datatables documentation for the columns initialization option:
Note that if you use columns to define your columns, you must have an entry in the array for every single column that you have in your table (these can be null if you don't wish to specify any options).
Depending on what your intent is, at the very least you need to add a definition for the third column, so something like this:
"columns": [
{ "data": "id" },
{
"data": "weblink",
"render" : function(data, type, row, meta){
if(type === 'display'){
return $('<a>')
.attr('href', data)
.text(data)
.wrap('<div></div>')
.parent()
.html();
} else {
return data;
}
}
},
{ "data": "status" } // Third column definition added
]
I have a mysql table with about 30000 rows. I have to put all rows in a DataTable and load each segment each time a table page is loaded (when you click on pagination). I saw that I can use the deferLoading parameter in my JS, but when I use it my pages are not loading. As you can see, I have to load images, so I absolutely have to do a light loading of the content...
Here is my HTML :
<table class="table table-striped table-bordered table-hover datatable products-datatable">
<thead>
<tr>
<th></th>
<th><?=_("Product")?></th>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th><?=_("Product")?></th>
<th></th>
</tr>
</tfoot>
</table>
Here is my JS :
var table = $('.products-datatable').dataTable( {
"order": [[ 1, "asc" ]],
"processing": true,
"serverSide": true,
"deferLoading": 30000,
"ajax": {
url: location.protocol + '//' + location.hostname + '/ajax/products.php?action=list',
type: "POST"
},
"columns": [
{ "data": "image",
"orderable": false,
"width": "80px" },
{ "data": "product" },
{ "data": "action",
"orderable": false,
"width": "20px",
"sClass": "class",
}
]
});
Here is my AJAX :
$req = $pdo->prepare('SELECT product_id, name FROM products');
if ( $req->execute() ) {
if ($req->rowCount()) {
$result['draw'] = 1;
$result['recordsTotal'] = $req->rowCount();
$result['recordsFiltered'] = 10;
$result['data'] = array();
$result['DT_RowId'][] = array();
while( $row = $req->fetch() ) {
if ($row['name']) { $name = $row['name']; } else { $name = "N/A"; }
$result['data'][] = array( "DT_RowId" => $row['product_id'],
"DT_RowClass" => 'myclass',
"image" => '<img src="' . HOSTNAME.'assets/img/products/' . $row['product_id'] . '.jpg" class="product_thumb">',
"product" => '' . $name . '',
"action" => "<i class=\"fa fa-close fa-2x text-danger\"></i>"
);
}
}
}
$req->closeCursor();
I'm sure there is something I missed... :-(
I believe you don't need to use deferLoading to benefit from server-side processing.
Your current script just returns all records and doesn't do sorting or filtering. You need to use ssp.class.php (available in DataTables distribution package) or emran/ssp class to correctly handle AJAX requests on the server.
DataTables library will send start and length parameters in AJAX request indicating which portion of the data is needed and your server-side processing class will correctly handle it for you.
Please see an example of server-side processing for more information.
I'm trying to create a reference into the row cell.
This is my code:
<table class="table table-striped table-bordered table-hover little_margin_table" id="data-table" width="100%">
<thead>
<th>First Name</th>
<th>Email</th>
<th>Password</th>
</thead>
<tbody>
#foreach (var item in Model.Items)
{
<tr id="#item.Id">
<td>#item.FirstName</td>
<td>#item.Email</td>
<td>#item.Password</td>
</tr>
}
</tbody>
</table>
Javascript code:
$(document).ready(function () {
$('#data-table').dataTable({
bFilter: false,
aoColumnDefs: [
{
bSortable: false,
aTargets: [1, 2],
},
{
"targets": 0,
"render": function (data, type, full, meta) {
return '<a href = "#(Url.Action("IndexPage", "Company"))/' + ROWID '</a>';
}
},
]
})
Here I am assuming the row Id :
<tr id="#item.Id">
How can get it to into the function render:
"render": function (data, type, full, meta) {
return '<a href = "#(Url.Action("IndexPage", "Company"))/' + ROWID '</a>';
Help, please.
You could add a extra column to your table:
<td>#item.FirstName</td>
<td>#item.Email</td>
<td>#item.Password</td>
<td>#item.Id</td>
Which is set to hidden in the datatables init code:
'bVisible': false
When you use render you can now get the Id value from full:
"render": function (data, type, full, meta) {
return '<a href = "#(Url.Action("IndexPage", "Company"))/' + full[3] + '</a>';
You could use a delegated event handler to add the id to the link when it is clicked :
$("#data-table").on("click", "td:eq(0) a", function(e) {
this.href+=$(this).closest('tr').attr('id');
})
And forget about adding ROWID to the href in the render callback. The table is generated serverside and your Model.items is never passed to the client as data, so I cannot see any other workaround.