<commit_before><!doctype html>
<html>
<head>
    <title>Angular Paging Directive</title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <style>
        body {margin-bottom: 50px;}
        li {padding: 5px}
        hr {margin: 50px 0}
        table { width: 100%; margin-bottom: 20px}
        table td {padding: 10px 4px; border-bottom: solid 1px #eee}
        .well hr {margin: 30px 0 30px}
        .jumbotron h2 {margin-top: 0}
        .text-muted {margin-bottom: 20px}
    </style>
</head>
<body>
    
    <div class="jumbotron">
        <div class="container">
            <h2>
                <a target="_blank" href="https://github.com/brantwills/Angular-Paging">
                    Angular Paging
                </a>
            </h2> 
            A directive to aid in paging large datasets while requiring the bare minimum of actual paging information. 
            We are very dependant on the server for "filtering" results in this paging scheme.  The central idea being
            we only want to hold the active "page" of items - rather than holding the entire list of items in memory
            and paging on the client-side.
        </div>
    </div>

    
    <div class="container" ng-app="myApp" ng-controller="sampleCtrl">
            
        <!--[if lt IE 10]>
            <div class="alert alert-warning">
               <strong>
                    It is highly recommended you update Internet Explorer or try using a modern browser!
               </strong> 
            </div>
        <![endif]--> 
        
            



        <h3> Basic Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>The simplest example for the paging directive</li>
            <li>Use the text boxes to adjust directive settings for each example below</li>
            <li>For advanced settings you will need to click the <b>apply</b> button</li>
        </ul>
        <div class="well">
            <div paging
                page="currentPage" 
                page-size="pageSize" 
                total="total">
            </div>  
        </div>
        <div class="well">



            <div class="form-group">
                <label>Current Page:</label>
                <input 
                    placeholder="page" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="currentPage" 
                    ng-init="currentPage = 1"/>
            </div>
            <div class="form-group">
                <label>Page Size:</label> 
                <input 
                    placeholder="Page Size" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="pageSize"
                    ng-init="pageSize = 10"/>
            </div>      
            <div class="form-group">
                <label>Total Items:</label> 
                <input
                    placeholder="Total" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="total" 
                    ng-init="total = 1000"/>
            </div>
        </div>
        <script src="https://gist.github.com/brantwills/3117b5182d12b8feb106.js"></script>
        <hr/>







        
        <h3> OnClick and Href Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>View the console.log to see onClick action</li>
            <li>Notice the URL after clicking a page below</li>
            <li>The text setting <code>{page}</code> will insert the page number in the href</li>
        </ul>
        
        <!-- 
            Notice the second parameter of DoCtrlPagingAct 
            is 'page' not currentPage

            This corresponds to the paging directives 'page' attribute
            You may pass in any number of parameters to your function 
            just be sure that the 'currentPage' parameter is replace with
            the paging directive page attribute

            The pageSize and total attributes are exposed similarly 
            However they share the same name as our controller scope
        -->
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                disabled="{{isDisabled}}"
                pg-href="{{pgHref}}"
                adjacent="{{adjacent}}"
                dots="{{dots}}"
                hide-if-empty="{{hideIfEmpty}}"
                show-prev-next="{{showPrevNext}}"
                show-first-last="{{showFirstLast}}"
                paging-action="DoCtrlPagingAct('Paging Clicked', page, pageSize, total)">
            </paging>   
        </div>
        <div class="well">
            <div class="form-group">
                <label>Href:</label> 
                <input
                    placeholder="pgHref" 
                    class="form-control"  
                    maxlength="10"
                    ng-model="pgHref" 
                    ng-init="pgHref = '#GotoPage-{page}'"/><commit_msg>Removing a disabled attribute from index.html where it was not needed<commit_after><!doctype html>
<html>
<head>
    <title>Angular Paging Directive</title>
    <link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
    <style>
        body {margin-bottom: 50px;}
        li {padding: 5px}
        hr {margin: 50px 0}
        table { width: 100%; margin-bottom: 20px}
        table td {padding: 10px 4px; border-bottom: solid 1px #eee}
        .well hr {margin: 30px 0 30px}
        .jumbotron h2 {margin-top: 0}
        .text-muted {margin-bottom: 20px}
    </style>
</head>
<body>
    
    <div class="jumbotron">
        <div class="container">
            <h2>
                <a target="_blank" href="https://github.com/brantwills/Angular-Paging">
                    Angular Paging
                </a>
            </h2> 
            A directive to aid in paging large datasets while requiring the bare minimum of actual paging information. 
            We are very dependant on the server for "filtering" results in this paging scheme.  The central idea being
            we only want to hold the active "page" of items - rather than holding the entire list of items in memory
            and paging on the client-side.
        </div>
    </div>

    
    <div class="container" ng-app="myApp" ng-controller="sampleCtrl">
            
        <!--[if lt IE 10]>
            <div class="alert alert-warning">
               <strong>
                    It is highly recommended you update Internet Explorer or try using a modern browser!
               </strong> 
            </div>
        <![endif]--> 
        
            



        <h3> Basic Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>The simplest example for the paging directive</li>
            <li>Use the text boxes to adjust directive settings for each example below</li>
            <li>For advanced settings you will need to click the <b>apply</b> button</li>
        </ul>
        <div class="well">
            <div paging
                page="currentPage" 
                page-size="pageSize" 
                total="total">
            </div>  
        </div>
        <div class="well">



            <div class="form-group">
                <label>Current Page:</label>
                <input 
                    placeholder="page" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="currentPage" 
                    ng-init="currentPage = 1"/>
            </div>
            <div class="form-group">
                <label>Page Size:</label> 
                <input 
                    placeholder="Page Size" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="pageSize"
                    ng-init="pageSize = 10"/>
            </div>      
            <div class="form-group">
                <label>Total Items:</label> 
                <input
                    placeholder="Total" 
                    class="form-control"  
                    maxlength="16"
                    ng-model="total" 
                    ng-init="total = 1000"/>
            </div>
        </div>
        <script src="https://gist.github.com/brantwills/3117b5182d12b8feb106.js"></script>
        <hr/>







        
        <h3> OnClick and Href Sample </h3>
        <ul class="list-unstyled text-muted">
            <li>View the console.log to see onClick action</li>
            <li>Notice the URL after clicking a page below</li>
            <li>The text setting <code>{page}</code> will insert the page number in the href</li>
        </ul>
        
        <!-- 
            Notice the second parameter of DoCtrlPagingAct 
            is 'page' not currentPage

            This corresponds to the paging directives 'page' attribute
            You may pass in any number of parameters to your function 
            just be sure that the 'currentPage' parameter is replace with
            the paging directive page attribute

            The pageSize and total attributes are exposed similarly 
            However they share the same name as our controller scope
        -->
        <div class="well">
            <paging
                class="small"
                page="currentPage" 
                page-size="pageSize" 
                total="total"
                pg-href="{{pgHref}}"
                adjacent="{{adjacent}}"
                dots="{{dots}}"
                hide-if-empty="{{hideIfEmpty}}"
                show-prev-next="{{showPrevNext}}"
                show-first-last="{{showFirstLast}}"
                paging-action="DoCtrlPagingAct('Paging Clicked', page, pageSize, total)">
            </paging>   
        </div>
        <div class="well">
            <div class="form-group">
                <label>Href:</label> 
                <input
                    placeholder="pgHref" 
                    class="form-control"  
                    maxlength="10"
                    ng-model="pgHref" 
                    ng-init="pgHref = '#GotoPage-{page}'"/>
{'fraction_non_alphanumeric': 0.10872509189398336, 'fraction_numerical': 0.012381505126716966, 'mean_word_length': 1.4005107963779893, 'pattern_counts': {'":': 0, '<': 169, '<?xml version=': 0, '>': 169, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5061809', 'n_tokens_mistral': 2913, 'n_tokens_neox': 2619, 'n_words': 762}