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>
Related
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 am trying to do some filtering (using bootstrap-table by wenzhixin) on a table I have being populated via JSON.
Part of HTML:
<button class="btn btn-primary" id="filterBtn">Filter</button>
<div class="container">
<table class="table table-bordered table-hover" id="table">
<thead>
<tr>
<th data-field="make">Make</th>
<th data-field="model">Model</th>
<th data-field="year">Year</th>
</tr>
</thead>
</table>
</div>
Part of JS:
// JSON file is input from a successful AJAX call.
function populateTable(json) {
$('#table').bootstrapTable({
data: json
})
}
// a button is click in html which calls this function.
function filterBy(model) {
console.log("filterBy is called");
$('#table').bootstrapTable('filterBy', {
make: [model]
});
}
The table populates correctly with all the data but once I hit the button I see that filterBy() is called but all that happens is it looks like the page refreshes but all the data in the table is still there like no filtering ever occurred.
I've tried changing make: [model] to make: ["Honda"] just as a test and it still doesn't work. It still performs the same behavior of refreshing the page with all the data still in tact.
Not sure what I am doing incorrectly.
https://github.com/wenzhixin/bootstrap-table/commit/de867d379a46b377efa7eef83fdf898b9073b28c
This is an issue i think after feature version: 1.11.0. Check the bootstrap-table.js and find this. I hope its will solve your problem. Good Luck!
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?
I am trying to render html element on canvas using html2canvas JS. But I am using AngularJS for data binding on html page and the dynamic data is not rendered on generated canvas from these html elements. For example, I have an html element like this:
<table class="table table-striped table-bordered table-hover">
<tr>
<th>Name</th>
<th>URI</th>
<th>Is Default</th>
<th>Action</th>
</tr>
<tr ng-repeat="printer in printers">
<td>{{printer.name}}</td>
<td>{{printer.url}}</td>
<td>{{printer.default}}</td>
<td><button ng-click="printTestPage(printer.url)">Print Test Page</button></td>
</tr>
</table>
But we can see that the dynamic data is not rendered on canvas:
Any suggestions regarding how to do it properly, with or without using html2canvas js???
When do you call the html2canvas?
You should call the function after the dom renderd
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/