Is there any way to use both angular-table-resize and AngularJS Tablesort for the same table?
If I just do the following:
<table resizeable mode="resizeMode" class="table table-striped table-bordered" border="1" ts-wrapper id="myTable">
</table>
it gives me the following error:
Error: [$compile:multidir] Multiple directives [resizeable, tsWrapper]
asking for new/isolated scope on:
Is there anything that I can do to avoid this error? How can I use both sorting and resizing on the same table then?
Related
I have a function that is the following:
$('#myDataTable').on('click', 'i', function(e) {
//Do stuff
I want to be able to directly put an onclick function in the html so I can put the event function in its own function and be able to call it from other places in my codebase. I want to do something like this:
<table id="myDataTable" class="table table-bordered table-striped table-hover" width='100%' onclick="myFunction()>
<thead><th></th></thead>
<tbody></tbody>
</table>
I know I can pass parameters through to myFunction() but how do I pass the i parameter to my onclick function in the html?
I tried doing onclick('i')="ticketLogging.removeDomainFromTable()" which doesn't fire off so I'm assuming its wrong syntax and I can't find any examples online that pass parameters to onclick.
just pass the 'i' in the function where it is called
<table id="myDataTable" class="table table-bordered table-striped table-hover" width='100%' onclick="myFunction('i')">
<thead><th></th></thead>
<tbody></tbody>
</table>
My page has a table
<table class="table table-bordered table-striped table-bordered" id="MapDetails" data-role="grid" role="grid" tabindex="0"> .. </table>
When i reload with
$("#MapDetails").load(url, ...);
It becomes
<table class="table table-bordered table-striped table-bordered" id="MapDetails" data-role="grid" role="grid" tabindex="0">
<table class="table table-bordered table-striped table-bordered" id="MapDetails" aria-activedescendant="MapDetails_active_cell">
<thead>
...
</thead>
<tbody>
...
</tbody>
Now i want to access the child table (second one). when i try
$("#MapDetails:not([role='grid'])")
in the browser it seems to works correctly (.children() then shows a thead and tbody element)
but the same query when written in javascript code doesnot work at all.
The jQuery Load Function loads data from the server and places it INSIDE of the matched element.
I'm running off of the assumption that the page is nothing but the table.
Therefore, when you're calling $('#MapDetails').load(url, ...); you're reloading the page, which is the table, and placing that data inside of the existing table. You could do $('#MapDetails').parent().load(url, ...); then you wouldn't have to worry about accessing the child table.
I have an HTML table which I want to build the most generic as possible.
I am using jquery-datatables, my problem is that I have try to use ng-repeat on headers of the table and jquery-datatables and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command $(ID).DataTables() in document ready it is run before angular.
The solutions for this situation is using a directive or angular-datatables.
But when I use angular-datatables with attribute datatables="ng" I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.
<table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<th class="gases_data_table_title" ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dga in listOfDGAs">
<td class="gases_data_table_item" ng-repeat="detail in dga">{{detail}}</td>
</tr>
</tbody>
</table>
I have some json data I get from my server that has a date field formatted like "StartDateTime":"2014-09-04T18:14:26Z"
i create a table as follows:
<table class="table table-condensed table-bordered table-striped table-hover responsive">
<tr><th>Title</th><th>Start Date</th></tr>
<tr ng-repeat="eachEvent in Events | orderBy:StartDateTime">
<td><span>{{eachEvent.Title}}</span></td>
<td><span>{{eachEvent.StartDateTime|date:'short'}}</span></td>
</tr>
</table>
the events are not ordered correctly by the start date. My question is what do I need to do to get this date to sort correctly. Fyi, not included in my example is clicking on the column to sort by date and reverse it. When I do this the dates are sorted correctly. So what I need is the initial sort to be done correctly.
here is a plunker example
You are simply missing quotes around StartDateTime. The following works in your example.
<tr ng-repeat="eachEvent in Events | orderBy:'StartDateTime'">
I'm thinking in replace Handlebars.js with Ractive.js.
The change seems smooth but this is my first problem and can be a newbie question.
I have a Ractive.js template which contains a table. The table in the template has several Bootstrap classes
class="table table-striped table-bordered table-condensed table-hover"
When I use this template with Handlebars.js the Bootstrap styles in the table are shown ok, as you can see in this jsfiddle.
But when I use the same template with Ractive.js the styles are not shown, as you can see in this jsfiddle.
I tried adding the classes manually:
$("#table").addClass("table")
$("#table").addClass("table-striped table-bordered")
$("#table").addClass("table-condensed table-hover")
Without success. I must be missing something very simple.
I think you just need <tbody> for bootstrap tables to work jsfiddle
With Ractive 0.4.0, you can create a component to encapsulate a bootstrap table:
<script id="bootstrap-table" type="x-template">
<table id="table" class="table table-striped table-bordered table-condensed table-hover" >
<tbody>
{{>content}}
</tbody>
</table>
</script>
Then use it in place of <table>:
<script id="templateOne" type="x-template">
<bootstrap-table>
<tr>
<th>
Column one
...
See http://jsfiddle.net/PCcqJ/2/