<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<Meta name = "the viewport" Content = "width = Device-width + Initial-Scale = 1.0">
< HTTP-equiv = Meta "X--the UA-Compatible" Content = "IE = Edge">
<title> one hundred million of the data page, checking, download </ title>
<style type = "text / CSS">
.hold2em { indent-text: 2em; font-weight: Bold; Line-height: 2.2em;}
.only3em {text-indent: 3em; Line-height: 3.1em;}
</ style>
</ head>
<body style = " margin: 0 100px 250px; ">
<h1 of> one hundred million pages of data, check the download: </ h1 of>
<H3> total logical page: </ h3>
<p class = "hold2em"> (1) configure the paging parameters defined in this page $ scope.currentPage = {myRequest: myRequest} ; $ scope and the currentPage then Crossing reference <splitPage mySplitPage = currentPage> </ splitPage> pass paging, paging define the properties and functions in the $ scope.mySplitPage objects, the reference to the principle according to the object, these attributes and functions can also be used in the current page. In $ scope.currentPage, the definition of variable data, additional data; in $ scope.mySplitPage Lane, but can not be defined using a variable corresponding data, determines the additional data. </ P>
<P class = "hold2em"> (2) processing the page jump, after the initial page, depending on whether the parameters, determines whether to display the filter box, whether to transmit the request based on the filter criteria back again. Parameters can be assigned to the filter criteria. </ P>
<H3> a, the background provides: </ H3>
<P class = "hold2em"> Data (1) this page to be displayed; </ P>
<P class = "hold2em"> (2) current pages, total number of pages, all pages of the total number of pieces of data; </ P>
<H3> Second, the static page: </ H3>
<P class = "hold2em"> (. 1) page with buttons, including "radio buttons" "Select All button this page", "Select All button all pages"; </ P>
<P class = "hold2em">
When <p class = "hold2em"> (1) initialization, defines seven variables. "Radio button" (in fact, this need not defined), "the current page Select All button", "Select All button all pages" are set to false; "all pages Select Level" is set to 0; "The total number of selected item" set to 0; "consisting returned from the server and the selected item ID array" (abbreviation: "selected ID array"); item ID "is selected and returned from the server after the blanking not any selected array consisting of "(abbreviation:" no election ID array ") is set to null; </ P>
<P class =" hold2em "> (2) click the button. After "radio button", "Current page Select All button," "all pages Select button" is clicked any record all data is affected. Realization of ideas: </ the p->
<the p-class = "only3em"> A, click on the "radio button." If the state of the "radio button" click is selected, then put the item id into the "Selected ID array", the item is removed from the id "did not choose ID array" in the "selected items the total number of "plus 1, to the" radio button "is set to true; and then determine whether the data of the current page id in the" selected ID array ", if there is not a" selected ID array "in, then put" current page Select button "and" all pages Select the button "are set to false; if the id of the current page data are in the" selected ID array "in, then the" current page Select All button, "set to true; then if "is selected the total number of items" is equal to "the total number of items in all the pages," then the "all pages select All button," set to true, the "all page select rating" is set to 1, otherwise to "all pages select the button" set It is false. If the "radio button" state after clicking is not selected, then put the item id is removed from the "Selected ID array" in the item's id into the "not selected ID array" where the "is selected the total number of items "minus 1, then the" radio button "," Select All button current page "and" Select All button all pages "are set to false. </ p>
<the p-class = "only3em"> B, click on the "Select All button in the current page." If the "current page Select All button," state after clicking is selected, the first page is not currently selected item id into the "Selected ID array", the page is not the current selected item from id "did not choose ID array "in the removal, the total number of the current page is not added to the selected items" the total number of entries is selected, "where the" (this page is not selected) radio button "is set to true, the" current page select All button "set to true; then if" is selected total item "equal" the total number of items in all the pages, "then the" all pages select All button, "set to true, the" all page select rating "is set to 1, otherwise the" All pages Select All button, "set to false. If the "current page Select All button," state after clicking is not selected, then the current page id delete selected item from the "Selected ID array" out, the current page selected item id into the "not selected ID array "from the" total number of selected items "in the current page minus the total number of selected item, the" (current page selected) radio button "," current page select All button "," select All button all pages "are set It is false. </ p>
<the p-class = "only3em"> C, click on the "Select All button all pages." If the "Select All button all pages" state after clicking is selected, then the current page, not the selected item id into the "Selected ID array" where the "no election array of ID" blank, the "selected items the total number of "assigned" the total number of items all pages ", the current page, not the selected item is selected, the" all page select rating "is set to 1; and then the" current page select All button, "and" all pages select All button "we are set to true. If the state "all pages Select button" click is not selected, then all the data back to the initialization state. </ P>
<P class = "hold2em"> (. 3) Click tab. After the "Home", "Previous", "Next", "Last", "Jump" is a click on any record all data is affected. Realization of ideas: </ P>
<P class = "only3em">
<p class = "only3em"> B, when "all pages Select level" is 0, if the current page of data an id in the "Selected ID array" already exists, the display is selected, otherwise display is not selected; if the current id All items of data in the "selected ID array" where already exists, "the current page select All button," set to true; then if "is selected the total number of items" is equal to "all pages total items number ", then the" Select All button all the pages "set to true, otherwise set to false. When "all pages Select Level" is 1:00, an id if the current page does not exist in the data "did not choose ID array" where, the item appears selected, otherwise it is not selected; if the current page all data the id does not exist in the "not selected ID array" where the "current page select All button," set to true; then if the "total number of selected items" equals "total number of items of all the pages," then the "select all pages buttons "is set to true, otherwise it is set to false. </ P>
<P class = "hold2em"> (. 4) click operation. Containing the "download", "delete", "Filter", "deployment" is clicked after any, to the back-end data transfer. Two situations: </ p>
<p class = "only3em"> A, if "all pages Select Level" is 0. Click "Download" to pass background value contains: a, "all pages Select level"; b, "has been selected ID array"; the background all the data "Selected ID array" of front-end distributed download. </ P>
<P class = "only3em"> B, if the "Select all page level" 1. Click "Download", containing the value backstage pass: a, "all pages Select level"; b, "did not choose ID array"; the background "did not choose ID array" in the data excluded, the rest of all the data sent to download the front. </ p>
<H3> Fourth, the paging component used page: </ H3>
<p class = "hold2em"> (. 1) paging component click function definition </ p> in the tab assembly in their scope
<p class = "hold2em"> (2) defined by first routing the page, the paging component is injected into the scope's </ p> tag tab assembly by
<p class number (3) page tab assembly block = "hold2em"> , calculated from the data from the incoming page </ P>
<H3> V. checkbox desired service page: </ H3>
<P class = "hold2em"> (2) contains the click kind of function, such as clicking a radio function, click on the current page select function, click select All pages function to get all of the selected item id function; </ p>
<p class = "hold2em"> (1) comprises various initialization, such as initializing the state of the radio, this page Select initialization state, the selected state of all the pages full initialization, initialize the array is selected item, the selected item unchecked array initialization; </ the p->
<p> <span style = " font-weight: 900; font-size: 20px"> another: </ span> 2 Scenario refresh (1) Click the navigation links carry parameters or triggers other pages, jump to the event On this page, re-render the HTML page, the page JS execution from start to finish again, This is all the variables are initialized, the final processing parameters; (2) click a button on this page to trigger the relevant event, implementation of the relevant JS, update the relevant data, not related to the same data, HTML page refresh; (- 3-) Ajax is without reloading the entire page, you can update the technology section of the page. (-4-) totalOfAllItemsOfAllPages totalOfAllPages totalOfAllItemsOfCurrentPage </ P>
</ body>
</ HTML>