How to draw button into table once using dataTable jquery - javascript

So I am trying to add a button two each row in the table.
I was able to accomplished this by doing the code below, but the button keeps generating every time i go to the next page and come back to it. It adds one button to the table every time I go between pages. I dont understand why this happening. Can someone please help me out. Thank you in advance.
$('#displayTable').on('draw.dt', function () {
$('.dataTable > thead > tr').append('<th style="width: 163px"></th>');
//adding button to table.
$('.dataTable > tbody > tr').append('<td>Add to Topic</td>');
});

You may use TableTools extension for DataTables to add custom buttons to table header.
In the override options:
"aButtons": [
{
"sExtends": "text",
"sButtonText": " ",
"fnInit": function ( nButton, oConfig ) {
$(nButton).attr("title", "Delete selected items");
$(nButton).removeClass("DTTT_button").addClass("btn btn-small");
$(nButton).append('<i class="icon-trash"></i> <i class="icon-white icon-exclamation-sign"></i>');
},
"fnClick": function( nButton, oConfig, oFlash ) {
if (!$(nButton).attr('disabled')) {
// code to run on click
deleteSelectedItems();
}
}
}
]

For anyone in the future looking for an answer, this is what I did
<script type="text/javascript">
$('#displayTable').on('preInit.dt', function () {
//adding column to table.
$('.dataTable > thead > tr').append('<th>header</th>');
});
$('#displayTable').on('draw.dt', function () {
//adding button to column.
$('.dataTable > tbody > tr').append('<td>Add to Topic</td>');
});
</script>

Related

JS changes width of tbody?

I have an table in my HTMl view (php mvc).
The table displays some basic information in a row.
By clicking the 'More' botton (+) you can see other information belonging to this user.
But somehow activating the JS chances the width of the affected row and the rows below, and slightly the first row.
How is this possible? And how can I prevent this?
Any help is welcome.
The code is in a fiddle here https://jsfiddle.net/jdkosnl/e71ms5ar/41/
$(document).ready(function () {
$('.show-more-button').click(function () {
var $this = $(this);
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($this.hasClass('fa-plus-square')) {
$this.removeClass('fa-plus-square').addClass('fa-minus-square');
$showMoreElement.css('display', 'block');
} else if ($this.hasClass('fa-minus-square')) {
$this.removeClass('fa-minus-square').addClass('fa-plus-square');
$showMoreElement.css('display', 'none');
}
});
});
Try to avoid using display: block when working with tables and their elements. The suitable value for tbody is 'table-row-group' (instead of 'block'). Like this:
if ($this.hasClass('fa-plus-square')) {
$this.removeClass('fa-plus-square').addClass('fa-minus-square');
$showMoreElement.css('display', 'table-row-group');
}
JSFiddle.

.toggleclass and .slidetoggle don't work

First of all, I've read all the topics about this issue and couldn't find a solution. Basically I'm trying to apply a simple nested gridview in my MVC project. It all works fine except the expand/collapse function. I implement it with this script:
$(document).ready(function () {
var size = $("#main #gridT > thead > tr > th").size(); // get total column
$("#main #gridT > thead > tr > th").last().remove(); // remove last column header
$("#main #gridT > thead > tr").prepend("<th></th>"); // add one column at first for collapsible column
$("#main #gridT > tbody > tr").each(function (i, el) {
$(this).prepend(
$("<td></td>")
.addClass("hoverEff")
.addClass("expand")
.attr('title', "click for show/hide")
);
//now get sub table from last column and add this to the next new added row
var table = $("table", this).parent().html();
//add new row with this subtable
$(this).after("<tr><td></td><td style='padding:5px; margin:0px;' colspan='" + (size - 1) + "'>" + table + "</td></tr>");
$("table", this).parent().remove();
-->>>Up until this point everything works smoothly.
//// add click event for make collapsible
$(".hoverEff", this).live('click', function () {
alert($(".hoverEff").parent().closest("tr").next().text());
$(".hoverEff").parent().closest("tr").next().slidetoggle(100);
$(".hoverEff").toggleclass("expand collapse");
});
});
//by default make all subgrid in collapse mode
$("#main #gridt > tbody > tr td.expand").each(function (i, el) {
$(this).toggleclass("expand collapse");
$(this).parent().closest("tr").next().slidetoggle(100);
});
});
When I open my page, subgrids are not collapsed, and when I click on the button, it doesn't trigger anything. I tried to check if the function is working with this code:
alert($(".hoverEff").parent().closest("tr").next().text());
and it is. I've also heard that inline elements cannot be affected by a .slidetoggle, but my element is a tr inside a table. I've also heard that .live is deleted in jQuery 2.0.0, but I have jQuery 3.0.0 installed through NuGet. I can't trigger .on('click') event and I'm starting to think I've messed up something in the bundle rendering.
My grid:
<div class="inner" id="inner2">
<div id="main" style="padding:25px; background-color:white;">
#grid.GetHtml(
htmlAttributes: new { id = "gridT", width = "700px" },
columns: grid.Columns(
grid.Column("singleUser.RA_Responsible_Person", "RA Responsible Person"),
grid.Column("singleUser.Issues_Count", "Issues Count"),
grid.Column(header: "Min Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Min_Deadline)),
grid.Column(header: "Max Deadline", format: (item) => string.Format("{0:dd-MM-yyyy}", item.singleUser.Max_Deadline)),
grid.Column(format: (item) =>
{
WebGrid subGrid = new WebGrid(source: item.Cases);
return subGrid.GetHtml(
htmlAttributes: new { id = "subT" },
columns: subGrid.Columns(
subGrid.Column("Issue_ID", "Issue_ID"),
subGrid.Column("Issue", "Issue"),
subGrid.Column("Case_Status", "Case_Status"),
subGrid.Column("Issued_by", "Issued_by"),
subGrid.Column("Issue_Date", "Issue_date"),
)
);
})
)
)
</div>
Please assist! Thanks in advance!
Are there any console errors?
I believe that toggleclass should be toggleClass should it not? The same with slideToggle?
I used google graphs in this page earlier and added jquery as a library through a link to googleapis. I removed it and I think all the functions stopped working, but it's a start.
I'll make another issue with a different content.

Datatables highlight rows beyond the first paginated page when table cells match

The Datatables plugin is giving me some issues when trying to highlight rows beyond the first paginated page.
As you will see in the example JSFiddle below I am sorting on the positions column on load. When there are 2 or more related positions in a row we highlight the parent table rows.The issue I am having is that if there is one position on the first page that is in the last table row and that matches the the first position on the second page the last table row on the first page is not highlighted. The example I am using here is the developer position.
JSFiddle
https://jsfiddle.net/ebRXw/563/
JS
$(document).ready(function () {
$('table').dataTable({
"paging": true,
"ordering": true,
"filter": false,
"length": false,
"info": false,
"order": [
[1, "asc"]
]
});
highlight();
$('table').on('draw.dt', function () {
if ($("thead th:nth-child(2)").hasClass("sorting_desc") || $("thead th:nth-child(2)").hasClass("sorting_asc")) {
highlight();
} else {
$("td").removeClass("info");
$("td").css("border-bottom", "");
}
});
function highlight() {
var duplicate = false;
$("table tbody tr").each(function () {
var $current = $(this).children(":nth-child(2)");
var $next = $(this).next().children(":nth-child(2)");
if ($current.text() === $next.text() && !duplicate) {
duplicate = true;
$current.parent().children().addClass("info");
$current.parent().prev().children().css("border-bottom", "1px solid #333");
} else if ($current.text() === $next.text() && duplicate) {
$current.parent().children().addClass("info");
} else if ($current.text() !== $next.text() && duplicate) {
$current.parent().children().addClass("info");
$current.parent().children().css("border-bottom", "1px solid #333");
duplicate = false;
} else {
$current.parent().children().removeClass("info");
$current.parent().children().css("border-bottom", "");
}
});
}
});
In DataTables only visible rows exist in DOM, that is why next() and prev() don't work as expected.
You can use rows({ search: 'applied' ).nodes() to get all the rows with filtering applied.
Also since you're working on the whole dataset, it makes sense to attach to order.dt event instead to highlight rows only once on ordering.
See updated jsFiddle for code and demonstration.
However I would recommend to see Row grouping example, it seems to be better in terms of usability and code.
In the highlight function, you're only looking at the the data of the current page. That is why the "Developer" row doesn't see that it actually has a duplicate row on some other page.
What you should do is look at the data of the entire table. You can do this by calling the following at the start of the highlight function:
var data = $('table').dataTable().fnGetData();
In each row of the current page you can than see if there's a duplicate row somewhere in the table by calling:
var isDup = $.grep(data, function(d) { return d[1] === $current.text(); }).length > 1;
Depending on this isDup var you can place css for info and border bottoms

Unable to remove rows from table with jQuery

I'm unable to remove rows from dynamically created table. If a user selects a option then on change event will be invoked. Upon that event dynamically here I'm creating a table. If a user selects another option previous rows should be removed and new rows should be added to table.
<table id="tbl1"></table>
<script type="text/javascript">
$('#options').change(function() {
$('#tbl1 tr').remove();
if (this.value != "") {
var tr = $('<tr>');
//some code to add nu. rows dynamically
$('<td> </td>').appendTo(tr);
$('#tbl1').last().after(tr);
}
//end
What is my mistake?
Try this : You can make use of append() to add row at the last position in table.
$('#options').change(function() {
$('#tbl1 tr').remove();
if (this.value != "") {
var tr = $('<tr>');
//some code to add nu. rows dynamically
$('<td> </td>').appendTo(tr);
$('#tbl1').append(tr); //use append instead of after
}
//end

Hide a table row with filtering jquery

I have the following example http://jsfiddle.net/zidski/MxqRu/1/
When you click on 2010 I need valuation to disappear with the list items.
Here is the code which I am using to do this:
$("#yearfilter a").live("click", function(e) {
e.preventDefault();
//var v = $(this).val();
var v = $(this).attr("data-value");
if(v.length > 0) {
$('tr.reports').show();
$('tr.reports ul').hide();
$('tr.reports ul.year-'+v).show();
$('tr.reports').each(function() {
if($('ul:visible', this).size() == 0) {
$(this).hide();
}
});
} else {
$('tr.reports').show();
$('tr.reports ul').show();
}
});
I have done it in my project something like this:
function toggleRow(row_id) {
row_selector = "#row_" + row_id;
$(row_selector).toggleClass("shown hidden")
}
Then in the CSS:
.hidden {display:none;}
.shown {}
Then in the HTML I have alternating table rows, where the odd rows act as headings for the content in the even rows. Clicking an odd row toggles the visibility of the corresponding even row.
...
<tr onclick="toggleRow(17)">...</tr>
<tr class="hidden" id="row_17">...</tr>
...
Give each tr an ID something like id="row_2010" then look for that and hide the whole entire row at once.
UPDATE
I would strongly suggest not using so many tables and use more classes to classify your data structure. It would help your javascript be much more clean, concise and function easier.
UPDATE
I adjusted all your javacsript and some of your html. Here is a fully working example jsFiddle Demo

Categories