We Keep Coding

How to make footable work in a table that's being populated with JS from JSON?

I have something like this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th>ID</th>
<th>FieldA</th>
<th data-hide="all">FieldB</th>
<th data-hide="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then a JS like this:
var fillThatTable = function (list) {
$.each(list, function (index, item) {
$('#thatTable tbody').append($('<tr>')
.append($('<td>').text(item.ID))
.append($('<td>').text(item.FieldA))
.append($('<td>').text(item.FieldB))
.append($('<td>').text(item.FieldC))
)
);
});
};
Everything works fine, the table gets the data and shows it all. Problem comes when I want to set footable() to that table, like so:
$(document).ready(function () {
fillThatTable();
$('#thatTable').footable();
});
And instead of getting something beautiful, I just receive an average filtered table, almost like I didn't put that $('#thatTable').footable(). I checked the JS are imported, they are. Is it maybe because the table doesn't have anything in the tbody? What am I missing?
Dream:
Reality:

I've updated PM's fiddle to make an easier use of FooTable: http://jsfiddle.net/0pb4x7h6/1
If your html changes to this:
<table id="thatTable" class="table toggle-circle">
<thead>
<tr>
<th data-name="ID">ID</th>
<th data-name="FieldA">FieldA</th>
<th data-name="FieldB" data-breakpoints="all">FieldB</th>
<th data-name="FieldC" data-breakpoints="all">FieldC</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-right">
<ul class="pagination"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
Then you can simplify your script to this:
$(document).ready(function () {
var list = [
{"ID":"1","FieldA":"A1","FieldB":"B1","FieldC":"C1"},
{"ID":"2","FieldA":"A2","FieldB":"B2","FieldC":"C2"},
{"ID":"3","FieldA":"A3","FieldB":"B3","FieldC":"C3"}
];
// No need for this
//fillThatTable();
$('#thatTable').footable({
rows: list
});
});

ng-table: How to use multiselect on different pages

I am using ng-table example from this page:
http://4dev.tech/2015/08/tutorial-basic-datatable-sorting-filtering-and-pagination-with-angularjs-and-ng-table/
Also I added selection method with ng-click method
<table ng-table="usersTable" id="productTable" class="table table-striped">
<tr>
<th ng-repeat="column in cols">{{column}}</th>
<th> Adet</th>
</tr>
<tr ng-repeat="row in data | filter: src_product">
#*<td ng-class="{ 'highlighted':row[column].isSelected }" ng-click ="selectCell(row[column])" ng-repeat="column in cols "> {{row[column]}} </td>*#
<td ng-class="{'highlighted':isSelected =='true'}" ng-model="product_field" ng-click="selectCell(this)" ng-repeat="column in cols ">{{row[column]}}</td>
<td><input class="input-group" type="text" style="width: 100%; height: 30px !important" name=" adet" value="0"></td>
</tr>
</table>
$scope.selectCell = function(cell) {
var selectedCellindex = (cell.$index) + (cell.$parent.$index) * ($scope.cols.length + 1);
var selectedCell = document.getElementsByTagName("td")[selectedCellindex];
if (selectedCell.getAttribute("class") === null) {
selectedCell.setAttribute("class", "highlighted");
} else {
selectedCell.removeAttribute("class");
}
}
The problem is that it only selects cells on current visible page. How can i solve this problem or store selected cells ?

Angular checkbox filter leaves no data

My checkbox filter is totally removing all data records instead of filtering.
I used this post as guidance: http://jsfiddle.net/65Pyj/
I can get and console the selected category. I am having problems filtering the list.
My data is like so:
{"product_title":"COPD Track Package","product_code":"COPDPKG2014","id":"a1u40000000C182AAC","Id":"a1u40000000C182AAC","sort_order":"6","sort_code":"COPDPKG2014","category":["Postgraduate Course, Continuing Education"]}
Here is the angular:
<div class="container">
<div class="ng-scope" ng-app="products">
<div class="ng-scope" ng-controller="ShoppingCartCtrl">
<div class="row">
<div class="col-sm-7"><h3 class="colored-title">Search Filter</h3>
<table class="table table-striped table-bordered">
<tbody>
<tr>
<td>By Product Title:</td>
<td><input ng-model="search.product_title" type="text"/></td>
</tr>
<tr>
<td>By Product Code:</td>
<td><input ng-model="search.product_code" type="text"/></td>
</tr>
<tr>
<td>By Presentation Title:</td>
<td><input ng-model="search.presentations" type="text"/></td>
</tr>
<tr>
<td>By Speaker Name:</td>
<td><input ng-model="search.speakers" type="text"/></td>
</tr>
<tr>
<td><input type="checkbox" ng-click="includeProduct('Postgraduate Course')"/>Postgraduate Course</td>
<td><input type="checkbox" ng-click="includeProduct('Continuing Education')"/>Continuing Education</td>
</tr>
<tr><td>Filter dump: {{productIncludes}}</td></tr>
</tbody>
</table></div>
</div>
<div>Sort by:<select ng-model="sortExpression">
<option value="sort_code">Product Code</option>
<option value="product_title">Product Title</option>
</select></div>
<table class="table table-bordered table-striped">
<thead>
<tr class="warning"><th>Product Code</th><th>Product Title</th></tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:mySortFunction | filter:search |filter:productFilter">
<td valign="top">
{{item.id}}<div ng-repeat="c in item.cat" >{{c}}</div>
</td>
<td>
{{item.product_title}}
</tr>
</tbody>
</table>
</div>
$scope.productIncludes = [];
$scope.includeProduct = function(category){
var i = $.inArray(category, $scope.productIncludes);
if(i > -1){
$scope.productIncludes.splice(i,1);
}else{
$scope.productIncludes.push(category);
}
console.log($scope.items.length);
}
$scope.productFilter = function (items) {
if ($scope.productIncludes.length > 0) {
if ($.inArray(items.cat, $scope.productIncludes) < 0) return;
}
return items;
}

Basically it is problem with your data representations.
You have categories stored as "category":["Postgraduate Course, Continuing Education"] and you want to search in those categories as if it was an array like "category":["Postgraduate Course", "Continuing Education"].
I recommend you to represent your data like the second case and then you can iterate over it like this:
$scope.productFilter = function (items) {
if ($scope.productIncludes.length > 0) {
var result = $scope.productIncludes.filter(function(n) {
return items.category.indexOf(n) != -1
});
if(result.length < 1) {
return;
}
}
return items;
}
And here is your fiddle: http://jsfiddle.net/65Pyj/133/
Short explanation:
filter function in combination with the indexOf function will return an intersection of the two arrays.

Check if value insert exist in dropdown with angularjs

I have a input with an autocomplete with angularjs. This autocomplete is from a json that is represented by a table in a dropdown. I can filter the results and click the correct value but i would check if the user type some value that is not in the dropdown with an error message. Here is the code:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div class="uk-form-row uk-width-1-1" data-ng-repeat="items in inputList.getinputList">
<input ng-model='item.value' type="text" placeholder="Choose"/>
<!-- WORKS OK -->
<div class="uk-parent" data-uk-dropdown="{mode:'click'}">
Nav item - Works OK
<div class="uk-dropdown uk-dropdown-navbar" style="top:50px">
<table>
<thead>
<tr>
<th>First Value</th>
<th>Second Value</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="item in numberList.getList | filter:item.value" ng-click="setSelected(item)">
<td>{{item.first}}</td>
<td>{{item.last}}</td>
</tr>
</tbody>
</table>
</div>
</div>
The angularjs part
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.item={}
$scope.numberList={}
$scope.numberList.getList=[{'first':'Jon','last':'skeet'},{'first':'naeem','last':'shaikh'},{'first':'end','last':'game'}]
$scope.inputList={}
$scope.inputList.getinputList=[{'firstA':'AAA','lastB':'BBBB'}]
$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
$scope.idSelectedVote = idSelectedVote;
$scope.item.value=idSelectedVote.first+' '+idSelectedVote.last;
//alert(idSelectedVote);
};
}
I created a fiddle here:
http://jsfiddle.net/8y48q/22/

You can use
<tr ng-show="(numberList.getList | filter:item.value).length == 0">
<td>Nothing here!</td>
</tr>
Fiddle

table.filter.js #quickfind has to search in first column

I have a litte problem with the PicNet table Filter. Here is the demo.
Here is my JS:
$(document).ready(function() {
// Initialise Plugin
var options = {
additionalFilterTriggers: [$('#quickfind')]
};
$('#dataTable').tableFilter(options);
});
Here is the HTML:
<body>
Quick Find: <input type="text" id="quickfind"/>
<table id='dataTable'>
<thead>
<tr>
<th>File</th>
<th>Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="left">10.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">20.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
<tr>
<td class="left">22.pdf</td>
<td class="right">22.03.12 19:45:58</td>
</tr>
</tbody>
</table>
..
Is it possible to search with #quickfind in only one (first) column?
when I search in #quickfind for "22" I got 3 results because the right column has a "22" in the date and time.
I disabled in the CSS the .filter class with display:none; because I only want one searchfield. I copied the genererated javascript code and replaced it with the #quickfind.
<input type="text" id="filter_0" class="filter" >
filter_0 is for the first row. filter_1 is for the second row. And so on. But the code works only in the table! and not above.
Any ideas to solve the problem?

You can disable the search for column(s), just put filter='false' attribute in the header th tag(s).
<th filter='false'>Last modified</th>