jQuery addClass example
Change class name on click in jQuery
HTML
<head> <script type="text/javascript" defer charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="js/script.js" defer></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
</head>
<table id="example" class="stripe">
<select name="query-select" size="1">
<option value="year">year</option>
<option value="months">months</option>
</select>
<tbody>
</tbody>
</table>
JavaScript
const dataArr = [
{
"firstname":"Виктор",
"lastname":"Петров",
"email":"[email protected]",
"phonenumber":"77777777777",
"birthday_contact":"1981-03-03",
"company":"Company 1"
},
{
"firstname":"Вася",
"lastname":"Пупкин",
"email":"[email protected]",
"phonenumber":"333333333333",
"birthday_contact":"2004-10-20",
"company":"Company 2"
},
{
"firstname":"Дима",
"lastname":"Коршунов",
"email":"[email protected]",
"phonenumber":"22222222222",
"birthday_contact":"1991-07-16",
"company":"Company 3"
},
{
"firstname":"Сан",
"lastname":"Саныч",
"email":"[email protected]",
"phonenumber":"33333333333",
"birthday_contact":"1998-07-03",
"company":"Company 4"
},
{
"firstname":"Змей",
"lastname":"Горыныч",
"email":"[email protected]",
"phonenumber":"33333333333",
"birthday_contact":"1998-11-03",
"company":"Company 4"
}
];
function addEvent () {
const select = $('select[name="query-select"]');
select.change(function (e) {
if(e.target.value === 'months'){
$('#example').dataTable({
columnDefs: [{
dorderData: [7],
targets: [4],
aDataSort: [7]
}]
})
}
if(e.target.value === 'year'){
table.destroy();
trigger = 'year';
table = $('#example').DataTable(setDataToTable(dataArr));
}
});
}
addEvent();
function getYear(obj) {
const index = obj.birthday_contact.indexOf('-');
const year = obj.birthday_contact.slice(0, index);
return year;
}
function getMonths(a) {
const index = a.birthday_contact.indexOf('-');
const secondIndex = a.birthday_contact.slice(index+1,...