I used blaze templates in my meteor project. I coded all tables in blaze templates.
used Meteor/easy search package to search table data. and use kuronin pagination for the subscription base pagination.
Now I want to covert that tables to the data tables. What is the best way to do it?
This is my code base.
<table class="table table-hover am-customers-table-2" id="mytable">
<thead>
<tr>
<th width="20%"><label>Customer Name</label></th>
<th width="15%"><label>Phone Number</label></th>
<th width="35%"></th>
<th width="5%"></th>
<th width="10%"><label>Actions</label></th>
<th width="10%"></th>
</tr>
</thead>
<tbody>
<!-- {{#EasySearch.Each index=searchCustomersIndex }} -->
{{#each documents}}
<tr style="{{#if flagStatus}}background-color: #FB299D33;{{/if}}">
<td>
<div class="single-line-list-item">
<span class="number">{{getFirstLettersOfTheName name}}</span>
<div class="data">
<span>{{name}}</span>
</div>
</div>
</td>
<td>
<span>{{number}}</span>
</td>
<td>
</td>
<td>
</td>
<td>
{{#if flagStatus}}
<button class="btn btn-sm btn-success markAsFlag" style="float: left">UnFlag</button>
{{else}}
<button class="btn btn-sm btn-danger customerMarkAsFlag" style="float: left">Flag</button>
{{/if}}
</td>
<td>
<button class="btn btn-sm btn-default" style="float: left">View Profile</button>
</td>
</tr>
<!-- {{/EasySearch.Each}} -->
{{/each}}
</tbody>
</table>
Can't you simply initialise the dataTable in .onRendered like so:
Template.onRendered(function () {
this.$('table.table').dataTable();
});
Related
I'm using the bootstrap4 framework for my web application. Here's my requirement
I have a table generated with some values & each row has a edit button at the end of the row (last column).
when edit button is clicked, it should pop up a form with existing data in the row. So that user can change only the refuired fields. I know this should be done using javascript to fill the text boxes in the current form. But with bootstrap4 framework i dont know the correct way to do this .
This is my table
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">TV 3</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Derana</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">5</th>
<td colspan="2">TV 5</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">6</th>
<td colspan="2">TV 6</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
<tr>
<th scope="row">7</th>
<td colspan="2">TV 7</td>
<td>Y</td>
<td><button type="button" class="btn btn-info">Edit</button>
</td>
</tr>
</tbody>
</table>
This is the edit button
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm" >
Edit
</button>
This is my POP form(modal) for the edit button
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here is a fully working code and more dynamic approach to what you want. You can use native boostrap jQuery function to show your modal on edit click button in your row.
You can watch which button triggered the modal and from their you can grab all the data using jQuery function like closest() and find()
Once you have the respective row data you can then apply it to your form input which are in the modal
In addition, i have also a functionality where recording status is Y then the checkbox in the modal will automatically be checked and if its N then it will be unchecked.
Live Working Demo:
$("#ModalLoginForm").on('show.bs.modal', function(event) {
var button = $(event.relatedTarget) //Button that triggered the modal
//get data
var cId = button.closest('tr').find('th').text() //1st th
var cName = button.closest('tr').find('th').next().text() //2nd th
var cDesc = button.closest('tr').find('th').next().next().text() //3 th
var isRecord = button.closest('tr').find('th').next().next().next().text() //4 th
//Apply data
$('[name="channelid"]').val(cId);
$('[name="channel"]').val(cName);
$('[name="description"]').val(cDesc);
//check the checkbox
if (isRecord == 'Y') {
$('[name="remember"]').prop('checked', true); //check the checbox
} else {
$('[name="remember"]').prop('checked', false);
}
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">Channel No</th>
<th scope="col">Channel Name</th>
<th scope="col">Descrption</th>
<th scope="col">Recording Status</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>TV 1</td>
<td>Otto</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>TV 2</td>
<td>Thornton</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>TV 3</td>
<td>dfdf</td>
<td>N</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>TV 4</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>TV 5</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>TV 6</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>TV 7</td>
<td>dfdf</td>
<td>Y</td>
<td><button type="button" class="btn btn-info" data-toggle="modal" data-target="#ModalLoginForm">
Edit
</button></td>
</tr>
</tbody>
</table>
<div id="ModalLoginForm" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<form role="form" method="POST" action="">
<input type="hidden" name="_token" value="">
<div class="form-group">
<label class="control-label">Channel No</label>
<div>
<input type="number" class="form-control input-lg" name="channelid" value="">
</div>
</div>
<div class="form-group">
<label class="control-label">Channel Name</label>
<div>
<input type="text" class="form-control input-lg" name="channel">
</div>
</div>
<div class="form-group">
<label class="control-label">Description</label>
<div>
<input type="text" class="form-control input-lg" name="description">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" name="remember"> Channel Recordable
</label>
</div>
</div>
<div class="form-group">
<div>
</div>
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-success">Update</button>
</div>
</div>
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
$(".table .btn-info").on("click", function(){ //now it aply for every .btn-info in every .table... so its better to make a new class or id for your table
var thContentFromThisRow = $(this).closest("tr").find("th").html(); // copy data from the TH in the same ROW as your clicked button
$('[name="channelid"]').val(thContentFromThisRow); //here you select your desired input to fill by name and then use .val (short for value) and you insert your data...
});
This is a short way of collecting one inner html from your th inside row of your button. Just to show how it worsk. Anyway you should go to w3c or another basics page and learn the basics of js/jquery. This code I've written is in jquery since you have bootstrap.
1. java script which is called
this.changeRole=function(user){
alert(user)
if(user=='Admin' || user=='Subject Manager'){
$scope.role=false;
}
else{
$scope.role=true;
}
}
2. html from that function is called
<div class="form-group">
<label class="col-sm-2 control-label">Role
<span class="text-danger">*</span>
</label>
<div class="col-sm-9">
<select class="form-control" ng-model="uc.newuser.role"
ng-change="uc.changeRole(uc.newuser.role)" required >
<option ng-repeat="role in uc.roles" ng-value="user.name" >
{{role}}
</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>E-mail ID</th>
<th>Mobile</th>
<th>User type</th>
<th ng-if="role=='Admin'">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.role.toString()}}</td>
<td ng-if="role=='Admin'">
<button class="btn btn-circle btn-gout1"
ng-click="uc.editUser(user.id)"
data-toggle="modal"
data-target=".bs-register-modal-md">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-circle btn-gout"
ng-click="uc.deleteUser(user.id)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
After ng-change the column with ng-if is hiding.
ng-if should be checked like
<td ng-if="role">
Not exactly sure on what actually is required. However, this is what I think:
The select dropdown decides the role and based on the role the actions should appear on the following set of users.
You could directly use ng-model to do the same.
var app = angular.module('myApp',[]);
app.controller('Ctrl',function($scope){
$scope.selectedRole = 'ADMIN'
$scope.roles = ['ADMIN','Subject Manager','Student'];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="Ctrl">
<div class="form-group">
<label class="col-sm-2 control-label">Role
<span class="text-danger">*</span>
</label>
<div class="col-sm-9">
<select class="form-control" ng-model="selectedRole"required >
<option ng-repeat="role in roles" value="{{role}}">
{{role}}
</option>
</select>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>User Name</th>
<th>E-mail ID</th>
<th>Mobile</th>
<th>User type</th>
<th ng-if="selectedRole === 'ADMIN'">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{user.phone}}</td>
<td>{{user.role.toString()}}</td>
<td ng-if="selectedRole==='ADMIN'">
<button class="btn btn-circle btn-gout1"
ng-click="uc.editUser(user.id)"
data-toggle="modal"
data-target=".bs-register-modal-md">
<i class="fa fa-pencil"></i>
</button>
<button class="btn btn-circle btn-gout"
ng-click="uc.deleteUser(user.id)">
<i class="fa fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</body>
i have following code my data does not sort according to datetime please help me this i am using <div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div> i think its show problem , check below code i have more then 30 records that's why sorting problem
<table st-table='displayedAssets' st-safe-src="assetController.assetsData" class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer">
<thead>
<tr>
<td colspan="9">
<ul class="list-inline list-unstyled">
Search
<li><input st-search="city" placeholder="City" class="input-sm form-control" type="search" /></li>
<li> <input st-search="region" placeholder="Region" class="input-sm form-control" type="search" /></li>
<li><input st-search="medium" placeholder="Medium" class="input-sm form-control" type="search" /></li>
</ul>
</td>
</tr>
<tr>
<th>City</th>
<th>create date</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in displayedAssets | orderBy:'created_date':true ">
<td>{{ row.city }}</td>
<th>{{ row.created_date }}</th>
<td>{{ row.location }}</td>
<td>
<button type="button" title="Delete" ng-click="assetController.showConfirm($event, row)" class="btn btn-sm btn-danger">
<i class="glyphicon glyphicon-remove-circle">
</i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="9" class="text-right">
<div st-pagination="" st-items-by-page="10" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
angularjs js
this.$http.get('/api/assets')
.then(response => {
this.assetsData = response.data;
this.socket.syncUpdates('asset', this.assetsData);
});
Date sorting
let dateTimeArr = ["11/14/13 12:07","12/13/11 01:07","09/09/12 09:04","08/30/14 19:05","04/24/04 16:03","08/15/16 10:02","12/13/11 02:07"]
let sortedArr = dateTimeArr.sort((a,b)=>{
return new Date(a).getTime() - new Date(b).getTime();
})
console.log(sortedArr);
I'm trying to sort data in jQuery by a specific attribute like following:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title"><h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title"> <h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title"><h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
#foreach (var item in ViewBag.rezultati)
{
<tr class="test" sale=#item.SaleNumber feedback=#item.Feedback>
<td>
#item.StoreName
</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="#item.StoreName" data-original-title="Analyze competitor">
<i class="fa fa-bar-chart-o"></i>
</button>
</td>
<td>
<b>
#item.SaleNumber
</b>
</td>
<td><b>#item.Feedback</b></td>
</tr>
}
</tbody>
</table>
And this is the code I'm currently using to sort the data, but it doesn't works as I want it to:
$(".feedbackClick").click(function () {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function (a, b) {
return +a.feedback - +b.feedback;
})
.appendTo($wrapper);
});
This just sorts 1 item in the whole table (or something, I'm not really sure?)
Can someone help me out with this?
Edit: Here is the rendered tr tag:
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
<h4><i class="fa fa-user" style="text-align:center"></i> <span>Username</span></h4> </th>
<th></th>
<th class="column-title">
<h4><span class="glyphicon glyphicon-tasks salesClick" aria-hidden="true"></span></h4></th>
<th class="column-title">
<h4><i class="fa fa-star feedbackClick"></i></h4></th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" sale="0" feedback="349">
<td>kansascitykittygirl</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="kansascitykittygirl" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td>
<b>0</b>
</td>
<td><b>349</b></td>
</tr>
<tr class="test" sale="10" feedback="14250">
<td>fancaveidaho</td>
<td>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" value="fancaveidaho" data-original-title="Analyze competitor"><i class="fa fa-bar-chart-o"></i></button>
</td>
<td><b>10</b></td>
<td><b>14250</b></td>
</tr>
</tbody>
</table>
The problem is a.feedback and b.feedback are not getting feedback attribute's value. You can use $(a).attr('feedback') and $(b).attr('feedback') instead like following.
$(".feedbackClick").click(function() {
var $wrapper = $('.testWrapper');
$wrapper.find('.test').sort(function(a, b) {
return +$(b).attr('feedback') - +$(a).attr('feedback');
}).appendTo($wrapper);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tableSellers" class="table table-striped jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">
Title
</th>
</tr>
</thead>
<tbody class="testWrapper">
<tr class="test" feedback="1">
<td>1111</td>
</tr>
<tr class="test" feedback="3">
<td>3333</td>
</tr>
<tr class="test" feedback="2">
<td>2222</td>
</tr>
</tbody>
</table>
<button class="feedbackClick">Sort</button>
What i am trying to do is refreshing my table on my site. I am creating the site with bootstrap and drop wizard (free marker in drop wizard). But i have no clue on how to refresh the tables content but not the whole page. Any tips are welcome.
<table class="table table-hover">
<thead>
<tr bgcolor="lightgray">
<td><strong>Data4</strong></td>
<td><strong>Data3</strong></td>
<td><strong>Data2</strong></td>
<td><strong>Data1</strong></td>
<td></td>
</tr>
</thead>
<tbody>
<div>
<#list datas as data>
<tr>
<td>
${data.id}
</td>
<td>
${data.mobile}
</td>
<td>
${data.size}
</td>
<td>
${data.sizebytes}
</td>
<td>
<a data-toggle="modal"
title="Info" class="open-datainfo btn btn-default" href="#logInformation">
<i class="icon-info-sign icon-black"></i> Data information
</a>
</td>
</tr>
</#list>
</div>
</tbody>
</table>