Js Jquery td auto numbering with custom locale language - javascript

Is there any way to auto numbering table data with local or custom language. I'm a Bengali, I know how to auto numbering table each row 1st data using css and js. But I don’t know how to use custom number, e.g. Bangla or Arabic.
Look at my code:
<table border="1">
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>
I want something like that;
১. Apple
২. Banana
৩. Orange
৪. Strawberry
How can I get that using Javascript / jquery.. Without adding any third party plugin.

You need to use toLocaleString() method or Intl.NumberFormat() constructor with the locale language as a parameter.
For example.
For Arabic numbers num.toLocaleString('ar-EG').
For Bangla numbers num.toLocaleString('bn-BD')
const table = document.querySelector('table');
[...table.rows].forEach((row, index) => {
row.cells[0].textContent = (index + 1).toLocaleString('bn-BD')
})
<table border="1">
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>

A CSS only solution would be using the CSS counter(..) function and pass the counter-style parameter (list-style-type) for 'bengali'.
E.g. td::before { content: counter(some-counter, bengali) }
Reference: MDN: counter() and MDN: list-style-type
table {
counter-reset: row 0;
}
tr {
counter-increment: row;
}
td::before {
content: counter(row, bengali) '. ';
}
<table border="1">
<tr>
<td>blue</td>
</tr>
<tr>
<td>red</td>
</tr>
<tr>
<td>black</td>
</tr>
</table>

Related

Sort DataTable by week and day

I use jQuery datatables to build up the table that shows project progress in the following format:
Project |Stage |Start |Finish
____________________________________
project 1 |stage 1 |W1D1 |W2D2
project 1 |stage 2 |W2D3 |W4D5
...
Project milestones are measured in the form 'W_D_' (Week, Day).
The problem is when I start sorting by column Start or Finish it doesn't work properly.
My code so far:
HTML:
<table id="projectStatus">
<thead>
<tr>
<th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td>project 1</td><td>stage 1</td><td>W1D1</td><td>W2D2</td>
</tr>
<tr>
<td>project 1</td><td>stage 2</td><td>W2D3</td><td>W11D5</td>
</tr>
<tr>
<td>project 1</td><td>stage 3</td><td>W11D6</td><td>W5D6</td>
</tr>
</tbody>
</table>
JS:
$('#projectStatus').DataTable({
orderable: true,
processing: true,
defaultContent: '',
pageLength: 10
});
How do I fix that sorting issue? Thank you.
Since your data has numeric nature, I'm afraid, you can't benefit from data-order/data-sort attributes of corresponding table cells which will sort your rows alphabetically.
The way out (without loading extra plug-in) is to set up your own custom data type (say 'weekday') and corresponding sorting method for that:
//init DataTable
$('#projectStatus').DataTable({
//set data type 'weekday' for columns 2, 3
columnDefs: [{
targets: [2,3],
type: 'weekday'
}]
});
//turn 'week+day' string into number of days
const weekDay2Num = str => ([week, day] = str.match(/W(\d+)D(\d+)/).slice(1), week*7+day);
//specify sorting method for type 'weekday'
Object.assign($.fn.DataTable.ext.oSort, {
'weekday-asc': (a,b) => weekDay2Num(a)-weekDay2Num(b),
'weekday-desc': (a,b) => weekDay2Num(b)-weekDay2Num(a)
});
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="projectStatus">
<thead>
<tr>
<th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td>project 1</td><td>stage 1</td><td>W1D1</td><td>W2D2</td>
</tr>
<tr>
<td>project 1</td><td>stage 2</td><td>W2D3</td><td>W11D5</td>
</tr>
<tr>
<td>project 1</td><td>stage 3</td><td>W11D6</td><td>W5D6</td>
</tr>
</tbody>
</table>
You should provide the wrong results.
What I see is that you have string values, which are not treated as numbers. E.g., W11D5 is shown before W2D3.
Try to use the data-order attribute, concatenating week and day:
<td>project 1</td>
<td>stage 2</td>
<td data-order="23">W2D3</td>
<td data-order="115">W11D5</td>
If it still doesn't work, zero-pad it:
<td>project 1</td>
<td>stage 2</td>
<td data-order="023">W2D3</td>
<td data-order="115">W11D5</td>
You can add the data-order attribute to the cells. DataTables will use this value to order your rows instead of the text inside. You can concatenate the Week and Day in this attribute.
<table id="projectStatus">
<thead>
<tr>
<th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
</tr>
</thead>
<tbody>
<tr>
<td>project 1</td><td>stage 1</td><td data-order="11">W1D1</td><td data-order="22">W2D2</td>
</tr>
<tr>
<td>project 1</td><td>stage 2</td><td data-order="23">W2D3</td><td data-order="115">W11D5</td>
</tr>
<tr>
<td>project 1</td><td>stage 3</td><td data-order="116">W11D6</td><td data-order="56">W5D6</td>
</tr>
</tbody>
</table>

Changing Table's tr:even with a different background color

I know how to do this with jquery, by doing this:
$("#rateTable tr:even").css("background", "#e7edea");
However, the format I am using will not allow jquery. I tried the code below, but it is saying that the style is null. Does anyone see what I am doing wrong?
document.getElementById("rateTable tr:even").style.background = "#e7edea";
<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
</table>
You don't really need JavaScript for this. It could been done in plain CSS with the nth-child pseudo-class.
tr:nth-child(even) {
background: #E7EDEA;
}
<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
</table>
You can do it with #rateTable tr:nth-of-type(even) as your selector. document.selectElementById() only works when you give it the exact string being used as an id, not a CSS selector. I would do it with CSS because it will update automatically and is likely faster, but you can do it in JS if you want:
const evenRows = document.querySelectorAll("#rateTable tr:nth-of-type(even)")
for (const row of evenRows) row.style.background = "#e7edea"
<table id="rateTable">
<tr>
<td>Blue</td>
<td>Green</td>
</tr>
<tr>
<td>Red</td>
<td>Purple</td>
</tr>
<tr>
<td>Teal</td>
<td>Yellow</td>
</tr>
<tr>
<td>Orange</td>
<td>Pink</td>
</tr>
</table>
Try to use querySelectorAll and next iterate over received collection to change background. See below:
var trToChange = document.querySelectorAll("#rateTable tr:nth-child(even)");
for(var i = 0; i < trToChange.length; i++){
trToChange[i].style.background = "#e7edea";
}

How to search in table based on specific column value?

I need to implement a search box in html table using drop down, so that I can search the data by specific column name heading.
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tr>
<td>Apple</td>
<td>Green</td>
</tr>
<tr>
<td>Grapes</td>
<td>Green</td>
</tr>
<tr>
<td>Orange</td>
<td>Orange</td>
</tr>
</table>
I got a Fiddle but this doesn't work in eclipse.
You can write simple script that will add a CSS class for proper column and column values. For example:
$("tr:first-child").addClass('fruits');
(you can add custom class like '.fruits' for Nth column, not only first-child, its only an example)
then you can write simple custom filter (searching for fruit with 'Z' letter in name) like:
var resultsOfSearchingFruitsWithZLetter = [];
$.each($('.fruits'), function(val) {
if(val.val().indexOf('z') > -1) {
resultsOfSearchingFruitsWithALetter.push(val.val());
}
});

JQuery Tablesorter - Filter by clicking link

I'm using #Mottie's excellent fork of Tablesorter and would like to be able to filter table column(s) with external links.
It isn't strictly necessary, but I'd like to make multiple clicks toggle the filter on and off. Alternatively, I could always add an All Records link that resets the column(s).
I don't need to combine filters in a single column. In other words, the data wouldn't be both January and October.
I found a table sort with external link demo, but that one sorts, not filters, and it doesn't toggle.
I also found a table filter with buttons demo which is pretty close. However, as I mentioned, I'd really like links instead, would like to have the links toggle if possible, and don't need the filters to combine.
Thanks in advance.
This was actually a lot easier than I thought. Here's a working demo that came directly from Mottie's demo code above. I replaced the buttons with links, renamed the associated class so it made more sense and replaced the class on the JavaScript function to match the one on the links.
Fair warning: I don't claim to know everything, so my modifications could have very silly errors.
$('.link-filter').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});
The filters in the various columns combine, but I only need a single column filter at the moment, so that's not really an issue for me.
Country:<br>
All Countries |
Netherlands |
Belgium |
Germany
<br /><br />
<table id="festivaloverzichttable" class="tablesorter">
<thead>
<tr>
<th width="17%" data-placeholder="Search...">Event</th>
<th width="18%" data-placeholder="Search...">Date</th>
<th width="9%" data-placeholder="Search...">Duration</th>
<th width="12%" data-placeholder="Search...">Place</th>
<th width="10%" data-placeholder="Search...">Country</th>
<th data-placeholder="Zoek...">Genre(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Event 1</td>
<td data-date="06-02">TBA</td>
<td>2</td>
<td>Oisterwijk</td>
<td>Netherlands</td>
<td>Hardstyle</td>
</tr>
<tr>
<td>Event 2</td>
<td data-date="10-11">11 October t/m 13 October</td>
<td>3</td>
<td>Volkel</td>
<td>Netherlands</td>
<td>Pop, Rock, Urban, Electronic</td>
</tr>
<tr>
<td>Event 3</td>
<td data-date="06-02">TBA</td>
<td>1</td>
<td>Amsterdam</td>
<td>Netherlands</td>
<td>Electronic</td>
</tr>
<tr>
<td>Event 4</td>
<td data-date="09-01">TBA</td>
<td>1</td>
<td>Utrecht</td>
<td>Netherlands</td>
<td>Electronic, Urban</td>
</tr>
<tr>
<td>Event 5</td>
<td data-date="07-06">6 July - 7 July</td>
<td>2</td>
<td>Beek en Donk</td>
<td>Netherlands</td>
<td>Electronic, Hardstyle</td>
</tr>
...
</tbody>
</table>​
Javascript
$("#festivaloverzichttable").tablesorter({
sortList: [[0, 0]],
widgets: ['zebra', 'filter', 'saveSort'],
widgetOptions: {
filter_reset: 'button.reset'
}
});
$('.link-filter').click(function() {
var filters = $('table').find('input.tablesorter-filter'),
col = $(this).data('filter-column'),
txt = $(this).data('filter-text');
// filters.val('');
filters.eq(col).val(txt).trigger('search', false);
});

How to style 3rd, 4th or 5th table cell using jQuery

I know to style odd / even table cells using jQuery, but how do i style the 3rd, 4th or 5th element?
<table width="300" border="0" cellspacing="0" cellpadding="0" id="Weekdays">
<thead>
<tr>
<td>Week Day</td>
<td>Short Name</td>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Mon</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Tue</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Wed</td>
</tr>
<tr>
<td>Thursday</td>
<td>Thr</td>
</tr>
<tr>
<td>Friday</td>
<td>Fri</td>
</tr>
<tr>
<td>Saturday</td>
<td>Sat</td>
</tr>
<tr>
<td>Sunday</td>
<td>Sun</td>
</tr>
</tbody>
</table>
How do i do it?
Using eq():
$('td:eq(5)').css('background','red');
// OR:
$('td').eq(5).css('background','red');
Both of those examples would color the 6th TD element's background in red.
You can use .slice() to literally get an element range (though I'm not 100% sure that's what you're after), like this:
$("td").slice(2, 5).css("color", "red");​
You can give it a try here this would select the following elements:
<td>Monday</td>
<td>Mon</td>
<td>Tuesday</td>
So I'm not sure what you mean by the element, here's a version using rows, just swap "td" for "tr" to get this.
$('#Weekdays tbody tr').each(function(i) {
// Modify the style of element i here
});
$('tr:nth-child(5)').function();
Theres a lot of things you don't know about CS3 :) http://www.w3.org/TR/css3-selectors/
To select childs from nth to last child of any element, simply use:
$("#mytable td").slice(n).hide()

Categories