Develop Reference

Build HTML from javascript

I have an HTML table which is built in the following way:-
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Party</th> <th>Name</th> <th>Chamber</th> <th>District</th> <th>State</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="user in users|filter:search|itemsPerPage:10">
<td> <img src="{{user.party_name}}" style="max-height: 10%;max-width: 10%;"/> </td>
<td>{{user.fullname}}</td>
<td > <img src="{{user.chamber_type}}" style="max-height: 8%;max-width: 7%;"/>{{user.chamber_name}} </td>
<td>{{user.district_name}}</td>
<td>{{user.state_name}}</td>
<td> <button type="button" class="btn btn-primary">View Details</button></td>
</tr>
</tbody>
</table>
Is it possible to create this table from javascript and in the HTML I just create a div and append the created table from javascript into this div. I tried placing the above content in a javascript variable and do an append but it did not work out. Is there a way to do this?? I think it did not work out may be because of the Angular JS variables. Correct me if I am wrong. I am pretty new to this.

In AngularJS use <div ng-bind-html="html-var"></div> and save the html-code in $scope.html-var.
For that you need to include <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-sanitize.js"></script>

Bootstrap datatable search function

I want to searching multicolumn value on the bootstrap table. There is any code for this
For example ;
https://datatables.net/examples/plug-ins/range_filtering.html
I want to searching like this but I could not find anything. I can post the data input on the server and write SQL query about LİKE . But it does not specific . Do have any example about it ?
Have a good day :)
My page screenshot
My table source code
<div class="table-responsive " style="height: 400px; overflow-y: auto;">
<table id="tablo_icin2" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>
<span class="btn btn-default btn-sm checkbox-toggle"><i class="fa fa-square-o"></i></span>
</th>
<th>User Name</th>
<th>Password</th>
</tr>
</thead>
<tr>
<td></th>
<td>Mark</th>
<td>123</th>
</tr>
</table>
</div>

You can make use of bootgrid as plugin for bootstrap.
http://www.jquery-bootgrid.com/Examples

dir-paginate directive not working properly in angularjs

I'm using dir-paginate directive in my html and it is working fine when I apply it body of my page, but if I use this directive inside a popup window then the pagination always show 10 pages even if my data is of two pages. Below is my code
<table class="table table-bordered table-striped exectable" >
<tr>
<th>Category</th>
<th>Operation Type</th>
<th>Identifier</th>
<th>Field Name</th>
<th>Old Value</th>
<th>New Value</th>
<th><input type="checkbox" style="margin-right:5px;" id="executeAll" name="executeAll"/>Select</th>
</tr>
<tr dir-paginate="item in items|itemsPerPage:50">
<td>{{item.Category}}</td>
<td>{{item.OperationType}}</td>
<td>{{item.Identifier}}</td>
<td>{{item.FieldName}}</td>
<td>{{item.OldValue}}</td>
<td>{{item.NewValue}}</td>
<td><input type="checkbox" name="{{item.Category}}"></td>
</tr>
</table>
<dir-pagination-controls
max-size="50"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
Please let me know if I'm missing anything.

Regular Table inside ngTable

I got the following html. I cut several columns
<table ng-table="NewIntroCtrl.tableParams" class="table table-striped table-bordered table-hover table-condensed" sortable="true">
<tr ng-repeat="pilot in $data">
<td data-title="'Licensee Id'">{{pilot.license}}</td>
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td>{{licence}}</td>
</tr>
</tbody>
</table>
</td>
<td data-title="'Origin'">{{pilot.origin}}</td>
</tr>
</table>
My controller has these tableParams:
self.tableParams = new NgTableParams({
count: 2
}, {
dataset: self.newIntroductoryFlight.pilots,
counts: []
});
It all works except for the fact that my generated table has got an empty column header right of licences. Also the content gets placed wrong from that point on.
Can i place tables in ng-table td-elements?

A quick look at the ngTable source code and the ngTable directive suggests this might be possible the function does a jQuery find on TD elements when it is on a row meaning it's not just selecting the direct child but all descendents however there is a option in this function for 'ignore-cell'
angular.forEach(row.find('td'), function(item) {
var el = angular.element(item);
if (el.attr('ignore-cell') && 'true' === el.attr('ignore-cell')) {
return;
}
The fix
<td data-title="'Licences'">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Endorsement</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="licence in pilot.licences">
<td ignore-cell="true">{{licence}}</td>
</tr>
</tbody>
</table>
</td>
Adding this on fixed the header display issues for me.

change the class of a specific tag

I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and - icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that
Here is example HTML.
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
and here is the script
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?

Try changing
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
to
jQuery(this).find('i').toggleClass('icon-plus icon-minus');

ok first of all never give multiple elements the same ID in a page... ever. Very bad practice and will cause complications when needing to refer to one specific element.
As for the jquery, use addClass and removeClass:
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
Like this:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>

Instead of jQuery(this).parent().next("i"), use jQuery(this).find("i")
In your sample, jQuery(this) is the thead element; the i element you want to reference is a descendant, not a sibling, so .parent().next("i") tries to match an element at the same level as your thead and tbody elements!

try this ( without icon of + and - )
note : i have changed the markup a bit.
CSS
i { padding:4px; cursor:pointer; }
.icon-minus { color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}
HTML
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3" ><i class="icon-minus"></i>Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" >
<tr >
<th colspan="3"> <i class="icon-minus"></i>More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
​jQuery
jQuery('.heading').bind('click',function(){
jQuery(this).siblings('tbody').slideToggle('0');
jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});
​
DEMO