Vuejs enables filtering pages for local data and vuejs for filtering pages

Vuejs enables filtering pages for local data and vuejs for filtering pages

Today, the project requires a paging function based on local data. Well, I thought it was very simple. I searched for all the data obtained by ajax on the Internet. This does not meet the requirements. It is too effort-consuming to modify it, it's better to write it by myself, not to mention directly accessing the code

:

Project requirements: Click data filtering on the left side to enable automatic paging, automatic page generation, and automatic jump.

Project code: js Code

Var subList = new Vue ({
El: '# main ',
Data :{
// SubcontentData is local data
SubContents: subcontentData,
// Data to be displayed on the page
Yemiandata: [],
// Number of display entries on the page
Datanum: 12,
// Start the coconut tree
Startnum: 0,
// End the coconut tree
Endnum: 1,
// Total number of pages
Btnnum: 0,
// Use the button to generate the switch page
Listnum: [],
// Input jump
Jemp: 1,




},
Methods :{
Filters (num ){
This. subContents = subcontentData;
// You need to reset it to prevent page turning from causing inconsistency between startnum and endnum.
This. startnum = 0;
This. endnum = 1;
// Here is the Filter button
Switch (num ){

Case 0: $ ('# sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(0).css ({
Background: '# dbe9f0'
});
This. fenye ();
Break;
Case 1:

$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(1).css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). sort des ('administrative ');
});
This. fenye ();
Break;
Case 2:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(2).css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). includes ('customer ');
});
This. fenye ();
Break;
Case 3:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(3).css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). partides ('assemblies ');
});
This. fenye ();
Break;
Case 4:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(42.16.css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). radides ('electronic ');
});
This. fenye ();
Break;
Case 5:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(5).css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). Des ('process ');
});
This. fenye ();
Break;
Case 6:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
}).Eq(6).css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). Des ('finance ');
});
This. fenye ();
Break;
Case 7:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Zookeeper .eq(7).css ({
Background: '# dbe9f0'
});
This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). includes ('manual ');
});
This. fenye ();
Break;
Case 8:
$ ('# Sublist li'}.css ({
Background: '# f2f2f2'
Registry.eq(8).css ({
Background: '# dbe9f0'
});

This. subContents = this. subContents. filter (num => {

Return String (num ['department ']). regiondes ('sales ');
});

This. fenye ();
Break;
}
},
// Shard Function
Fenye (){

This. yemiandata = this. subContents. slice (this. startnum * this. datanum, this. endnum * this. datanum );
This. btnnum = Math. ceil (this. subContents. length/this. datanum );
This. listnum = [];
For (I = 0; I <this. btnnum; I ++ ){

This. listnum [I] = I + 1;
}
Btnwidth ();


},
// Next page Function
Nextlist (){
If (this. endnum> = this. btnnum ){
Alert ('Last page ');

Return false;
}
This. endnum ++;
This. startnum ++;





},
// Previous Page Function
Prevlist (){
If (this. startnum <= 0 ){
Alert ('first page ');

Return false;
}
This. endnum --;
This. startnum --;




},
// The button jumps to the specified page
Jemppage (list ){
This. startnum = list-1;
This. endnum = list;
},
// Input hop capture
Goindex (){
Console. log (parseInt (this. jemp ));
If (parseInt (this. jemp)> this. btnnum) {alert ('enter valid parameters'); return}
This. endnum = this. jemp;
This. startnum = this. jemp-1;
}

},
// Use a listener. Can reduce a lot of code
Watch :{
Startnum (n, o ){

This. yemiandata = this. subContents. slice (n * this. datanum, (parseInt (n) + 1) * this. datanum );


}
}
});

SubList. filters (0 );
SubList. fenye ();
// Encapsulate the automatic size at the bottom of the btn Method
Function btnwidth (){
Certificate ('{fbtn'}.css ({
Width :( subList. listnum. length + 2) * 40 + 293 + 'px ',
MarginLeft:-(subList. listnum. length + 2) * 40 + 293)/2 + 'px'
})
}

Btnwidth ();

The following is the html Node Code:

<Div class = "main_content">
<Div class = "table2_nav">
<Ul id = "sublist">
<Li @ click = "filters (0)"> <div class = "blockcenter"> Department classification (Department 8/8) </div> </li>
<Li @ click = "filters (1)"> <div class = "blockcenter"> Administration </div> </li>
<Li @ click = "filters (2)"> <div class = "blockcenter"> customs clearance section </div> </li>
<Li @ click = "filters (3)"> <div class = "blockcenter"> Assembly </div> </li>
<Li @ click = "filters (4)"> <div class = "blockcenter"> electronics </div> </li>
<Li @ click = "filters (5)"> <div class = "blockcenter"> Process </div> </li>
<Li @ click = "filters (6)"> <div class = "blockcenter"> Finance Department </div> </li>
<Li @ click = "filters (7)"> <div class = "blockcenter"> manufacturing department </div> </li>
<Li @ click = "filters (8)"> <div class = "blockcenter"> sales department </div> </li>
</Ul>
</Div>
<Div class = "table2_content">
<Div class = "col-title bg-fff clearfix">
<H5 class = "fl"> alarm policy report Statistics <Div class = "btn fl">
Host Name & nbsp; <span class = "caret"> </span>
<Div class = "btn_down">
<Ul>
<Li> next </li>
<Li> 2 </li>
</Ul>
</Div>



</Div>
<Div class = "fl btn2">
Add
</Div>
</Div>

<Table width = "1410px" class = "table" id = "tablelist tab">
<Tr>
<Th> employee ID </th>
<Th> name </th>
<Th> Department name </th>
<Th> gender </th>
<Th> nationality </th>
<Th> employee status </th>
<Th> Start time </th>
<Th> departure time </th>
<Th> resignation type </th>

</Tr>
<Tr v-for = "subContent in yemiandata">
<Td >{{ subContent. num }}</td>
<Td >{{ subContent. name }}</td>
<Td >{{ subContent. department }}</td>
<Td >{{ subContent. sex }}</td>
<Td >{{ subContent. addres }}</td>
<Td >{{ subContent. staic }}</td>
<Td >{{ subContent. jointime }}</td>
<Td >{{ subContent. leavetime }}</td>
<Td >{{ subContent. type }}</td>

</Tr>


</Table>

<Div class = "vuetab clearfix">
<Ul class = "fbtn clearfix" id = "fbtn">
<Li @ click = "prevlist ()"> & lt; </li>
<! -- <Li @ click = "jemppage ($ event)"> 1 </li> -->
<Li v-for = "list in listnum" @ click = "jemppage (list)" >{{ list }}</li>
<Li @ click = "nextlist ()"> & gt; </li>
<Div id = "pages"> {btnnum} pages </div>
<Div id = "gotoindex"> to <input type = "text ": value = "jemp" v-model = "jemp" id = "inputnum"> page </div>
<Button id = "gobtn" @ click = "goindex ()"> OK </button>
</Ul>





</Div>
</Div>

</div>

Let's talk about the following idea: first, we need a set of local data to be added to the page through vue, and the second step we need to perform paging, so we can write a function, right, therefore, with the following fenye function (naming is not standard, so do not blame the prawns), the so-called paging is nothing more than dividing a big data into every small page for display, so I wrote an array specifically used for display, that is, yemiandata (also not standard, I said that the name has been exhausted because I have made too many website content, you guys), then we need to get the number of pages and turn them into a btn button. To save trouble, I added a watch: To listen to startnum (start page) if it changes, it will change the display.
Step 3: The next page must be displayed on the previous page, which is much simpler. The next page is added to both startnum and endnum, and vice versa.
Step 4: you also need to click the page number button to jump. This is not difficult, that is, let the button click down to jump to the specified page, but write the function? It's not realistic, right? So I used an array listnum to store the buttons. Here I want to explain why we don't need to use an array for variables, because v-for in vue does not support variable loops, so I use arrays to generate nodes in html.
Step 5 said that filtering is required. If filtering is needed, the group of elements to be displayed should be converted to the filters function that contains the keyword. filter js filters and DES will be used for filtering, failed. Many undefind appear. Why? Check whether the array is reset. As a result, the second filtering is based on the first filtering. You can reset it and try again!
The general idea is that you can add qq: 421217189 if you do not understand it.

Finally, some code is required by my company's projects. For example, the css code will not be shared in the following box. Our partners are dedicated. You can discuss anything you don't understand.