How to use <b-pagination-nav> from Bootstrap Vue? - javascript

I want to start using the introduced in this tutorial. The problem is that that I don't know how to make the tag to work on my website. The explanation that is given in the tutorial on how to do that is very vague and as a beginner, I can't make it work.
I installed bootstrap and bootstrap-vue and added the .css and .js files the following way:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-vue.min.css">
<script src="js/bootstrap-vue.min.js"></script>
However, I don't think any of these add the tag, because when I try to implement it, it is not appearing. At the bottom of the tutorial linked above, there is a section that gives information on how to import single elements. I tried to use the lines of code provided there but it did not change anything. Please, help me.

On BootstrapVue website you will find everything you need in order to use it.
Your case is listed under #Browser section of Getting Started. Make sure you add all those dependencies to your page's <head>.
And, as for using it, you have to initialize a Vue instance on window.load event, at the earliest.
Example:
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
{ id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
{ id: 3, first_name: 'Barney', last_name: 'Rubble' },
{ id: 4, first_name: 'Betty', last_name: 'Rubble' },
{ id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
{ id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
{ id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 8, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
]
}
},
computed: {
rows() {
return this.items.length
}
}
})
}
<!-- Add this to <head> -->
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<!-- Example #app template -->
<div id="app">
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</template>
</div>

Related

Bootstrap -vue table how to remove row with animation

I'm using bootstrap vue tables, and I'd like to remove rows with animation.
When attaching animation to the table, the removed row doesn't animate, but the rows that move up to fill its place do animate. How do I make the removed row animate as well?
I've tried dozens of animation classes and property values in the css, but none of them seem to have any effect on the row being removed.
(please note that the snippet is cut off at the bottom, so to demo the remove button press, view the snippet in full screen)
Vue.config.productionTip = false;
var app = new Vue({
el: '#app',
methods: {
clickedRemove() {
this.items = this.items.filter(i => i.first_name !== 'Larsen');
}
},
data: {
transProps: {
name: 'v'
},
fields: [{
key: 'first_name',
label: 'Given Name'
},
{
key: 'age',
label: 'How Old'
},
{
key: 'last_name',
label: 'Surname'
},
],
items: [{
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
age: 21,
first_name: 'Larsen',
last_name: 'ANIMATE THIS ON REMOVE ??'
},
{
age: 89,
first_name: 'Geneva',
last_name: 'Wilson'
},
]
}
})
table#table-transition-example .v-enter-active, .v-leave-active {
transition: opacity 0.5s ease;
}
table#table-transition-example .v-enter-from, .v-leave-to {
opacity: 0;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="app">
<div>
<b-table striped small :items="items" :fields="fields"
id="table-transition-example" class="fade-out"
:tbody-transition-props="transProps"
>
<template #cell(age)="{ item }">
<p class="text-info">age {{ item.age }}</p>
</template>
</b-table>
<b-button #click="clickedRemove">Remove Larsen With Animation</b-button>
</div>
</div>

Filter BootstrapVue table using comma separated string with OR condition in input field

I have a BootstrapVue table that looks like this;
The code(credit goes to this answer) for the table is here;
new Vue({
el: '#app',
data() {
return {
filter: '',
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 },
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" class="p-5">
<b-input v-model="filter" placeholder="Filter table.."></b-input>
<hr />
<b-table :items="items" :fields="fields" :filter="filter">
</b-table>
</div>
Based on the above code, table rows will be filtered based on the string inside the input field. Unfortunately, this is not what I want. What I want is for the input field to be able to accept a comma-separated string and the sub-strings can be used to filter the table rows in an OR condition. For example, if the string is 54, Hvidt, then the first and second rows will be filtered.
I am using BootstrapVue, vue.js 2.6
BootstrapVue allows writing your own logic for filtering, using a custom filter function.
In order for it to work, you need:
a :filter specified
the filter value to be truthy. If it's falsey, the filter function is bypassed (no filtering occurs).
a :filter-function specified, taking two arguments: row and current filter value (optional and not needed: you can read it from this.filter).
Here's an example, splitting current filter value by , (comma), normalising the fragments (trim & toLowerCase), and returning whether or not any fragment is found within the normalised values of the row.
new Vue({
el: '#app',
data() {
return {
filter: '54, Hvidt',
items: [
{ id: 1, first_name: "Mikkel", last_name: "Hansen", age: 54 },
{ id: 2, first_name: "Kasper", last_name: "Hvidt", age: 42 },
{ id: 3, first_name: "Lasse", last_name: "Boesen", age: 39 },
{ id: 4, first_name: "Kasper", last_name: "Hansen", age: 62 },
{ id: 5, first_name: "Mads", last_name: "Mikkelsen", age: 31 }
]
}
},
methods: {
normalizeString(s) {
return `${s}`.trim().toLowerCase();
},
filterFn(row) {
return this.filter.split(',')
.map(this.normalizeString)
.some(
term => Object.values(row)
.map(this.normalizeString)
.some(
val => val.indexOf(term) > -1
)
);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script src="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.min.js"></script>
<link href="https://unpkg.com/bootstrap-vue#2.6.1/dist/bootstrap-vue.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap#4.4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div id="app" class="p-5">
<b-input v-model="filter" placeholder="Filter table..."></b-input>
<hr />
<b-table :items="items" :filter="filter" :filter-function="filterFn">
</b-table>
</div>
Important note: the filter function provided here is demonstrative, it doesn't take into account BootstrapVue's built-in filter-ignored-fields and filter-included-fields. Nor does it take into account the filterByFormatted field definition.
If you need any of those features, you'll need to improve it yourself.
I guess it's needless to point out the filter function has access to the entire component and can be modified in any way. The row is displayed if the function returns a truthy value and is not displayed if it returns a falsey value.

How to give a link to each row in bootstrap-vue table

I have an bootstrap-vue table in my project.
I want to give each row a link (something like code below)
<template #row>
<div #click="goToPage">
{{ item.name}}
</div>
</template>
but do not know how to access table tr in bootstrap
codesandbox
i would really appreaciate if someone can help me with it
You can add selectable to your table and event row-selected:
<b-table select-mode="single" ref="selectableTable" selectable #row-selected="onRowSelected" small :fields="fields" :items="items" responsive="sm">
and then create method:
methods: {
onRowSelected(item) {
console.log(item)
}
}
You can use the #row-clicked event, which as the name suggests is triggered when a row is clicked.
The method is sent the item for the row which was clicked, so you can access any information from the item if needed. Along with the index and native click event.
new Vue({
el:"#app",
data: () => ({
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 11, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}),
methods: {
onRowClicked(item, index, event) {
console.log(item)
}
}
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app" class="p-3">
<b-table striped hover :items="items" #row-clicked="onRowClicked"></b-table>
</div>

Why is dom-repeat not creating the template on array value?

I'm creating a dom-repeat module using Polymer 2. It is a simple array of objects.
I have tried using both one-way and two-way binding for the items attribute, i have tried adding and removing the "as" attribute.
This is my code ofr the component. It is the onlyone in my proyect
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<dom-module id="firebase-test">
<template>
<style>
</style>
<h2>Hello!</h2>
<template is="dom-repeat" items="{{arrayContacts}}" as="contact">
<p>{{contact.firstname}}</p>
</template>
</template>
<script>
class FirebaseTest extends Polymer.Element {
static get is() { return 'firebase-test'; }
static get properties() {
return {
arrayContacts: {
type: Array,
value:[{ firstname: "Jack", lastname: "Aubrey" },
{ firstname: "Anne", lastname: "Elliot" },
{ firstname: "Stephen", lastname: "Maturin" },
{ firstname: "Emma", lastname: "Woodhouse" }]
}
};
}
}
window.customElements.define(FirebaseTest.is, FirebaseTest);
</script>
</dom-module>
Nothing is being printed
It seems there is nothing at your codes. It's working here as you can run code
HTMLImports.whenReady(function() {
class FirebaseTest extends Polymer.Element {
static get is() { return 'firebase-test'; }
static get properties() {
return {
arrayContacts: {
type: Array,
value:[{ firstname: "Jack", lastname: "Aubrey" },
{ firstname: "Anne", lastname: "Elliot" },
{ firstname: "Stephen", lastname: "Maturin" },
{ firstname: "Emma", lastname: "Woodhouse" }]
}
};
}
}
window.customElements.define(FirebaseTest.is, FirebaseTest);
});
<html>
<head>
<base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<firebase-test></firebase-test>
<dom-module id="firebase-test">
<template>
<style>
</style>
<h2>Hello!</h2>
<template is="dom-repeat" items="{{arrayContacts}}" as="contact">
<p>{{contact.firstname}}</p>
</template>
</template>
</dom-module>
</body>
</html>

Angular-UI-Select ng-model not working with a simple variable on $scope

How do you clear an array with selected values so that values can return to the select?
I have a people array. The people array values are available in select. When I choose names, they are transferred to the multipleDemo array. And you can not reselect them from select because they disappear and are moved to the multipleDemo array. With the Delete button I have to delete all elements from the multipleDemo array (except the first element) into the people array. So that you can again choose a name from the select. Error in function $clearTag.
Expecting behavior:
Example:
Select: Wladimir
Appear tag Wladimir
Select Wladimir (You can't choose Wladimir because he is already chosen)
Click Delete. Cut elements(tags) with multipleDemo array and put them in array people
You can again select Wladimir
Here is my code: http://plnkr.co/edit/TPZjXkkSRrIc5ApzP07F?p=preview
index.html
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<!-- ui-select files -->
<script src="select.js"></script>
<link rel="stylesheet" href="select.css">
<script src="demo.js"></script>
<!-- Select2 theme -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
<style>
body {
padding: 15px;
}
.select2 > .select2-choice.ui-select-match {
/* Because of the inclusion of Bootstrap */
height: 29px;
}
.selectize-control > .selectize-dropdown {
top: 36px;
}
</style>
</head>
<body ng-controller="DemoCtrl">
<h3>Array of strings</h3>
<button ng-click='clearTag()'>Delete</button>
<ui-select tagging tagging-label="new tag" multiple ng-model="multipleDemo"
on-select="OnClickSelect($item)" on-remove="OnRemoveSelect($item)"
theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select name...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="item in people | filter:$select.search">
{{item.name}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo}}</p>
<hr>
</body>
</html>
demo.js
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.multipleDemo =[];
$scope.people = [
{ name: 'Adam', email: 'adam#email.com', age: 12, country: 'United States' },
{ name: 'Amalie', email: 'amalie#email.com', age: 12, country: 'Argentina' },
{ name: 'Estefanía', email: 'estefania#email.com', age: 21, country: 'Argentina' },
{ name: 'Adrian', email: 'adrian#email.com', age: 21, country: 'Ecuador' },
{ name: 'Wladimir', email: 'wladimir#email.com', age: 30, country: 'Ecuador' },
{ name: 'Samantha', email: 'samantha#email.com', age: 30, country: 'United States' },
{ name: 'Nicole', email: 'nicole#email.com', age: 43, country: 'Colombia' },
{ name: 'Natasha', email: 'natasha#email.com', age: 54, country: 'Ecuador' },
{ name: 'Michael', email: 'michael#email.com', age: 15, country: 'Colombia' },
{ name: 'Nicolás', email: 'nicolas#email.com', age: 43, country: 'Colombia' }
];
$scope.OnClickSelect=function(item)
{
$scope.multipleDemo.push(item.name);
}
$scope.OnRemoveSelect = function(item) {
var index = $scope.people.indexOf(item.name);
$scope.people.splice(index, 1);
}
$scope.clearTag = function() {
for(var i =0; i < $scope.multipleDemo.length; i++) {
$scope.multipleDemo.splice($scope.multipleDemo[i], 1000);
$scope.people.push($scope.multipleDemo[i]);
}
}
Angular-UI-Select Common Issues
ng-model not working with a simple variable on $scope
You cannot write:
WRONG
<ui-select ng-model="multipleDemo"> <!-- Wrong -->
[...]
</ui-select>
You need to write:
<ui-select ng-model="vm.multipleDemo"> <!-- Correct -->
[...]
</ui-select>
For more information, see
AngularUI-Select FAQ - Common Issues
Update
vm.multipleDemo doesn't work; I try $parent.multipleDemo - it works. I don't understand $parent. Why it works?
For vm.multipleDemo to work, the controller must initialize the vm object:
app.controller('DemoCtrl', function($scope, $http, $timeout) {
$scope.vm = { multipleDemo: [] };
New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view, ng-include and ng-if all create new child scopes, so the [data hiding] problem often shows up when these directives are involved. (See this example for a quick illustration of the problem.)
This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.
— What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
Avoid using $parent to fix a data hiding problem. It is a brittle solution as there can be more than one level of scope heirarchy between the controller and the ui-select directive. I consider the use of $parent to be a code smell, a symptom of a deeper problem.
Update #2
When I can use $ctrl in view and this in controller?
If the controller is instantiated with "controller as" syntax:
<body ng-controller="DemoCtrl as $ctrl">
<ui-select ng-model="$ctrl.multipleDemo">
<!-- -->
</ui-select>
Then there is no need to use $scope:
app.controller('DemoCtrl', function($http) {
this.multipleDemo = [];
And it avoids the data hiding problem.
For more information, see
'this' vs $scope in AngularJS controllers

Categories