jquery json plugin (study)

(learn) making jquery plugin for parsing json data. anovsiradj.blogspot.com

by Anov Siradj

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<i>list :</i>
<ul id="list1"><li>Loading video list 1 ...,</li></ul>

<hr/>

<i>list with pagination :</i>
<ul id="list2"><li>Loading video list 2 ...,</li></ul>
<i>list2pagination result :</i>
<div id="list2pagin-result"></div>

<script>
    // data json
    // by http://www.json-generator.com/
    var myJsonData = [
  {
    "index": 74,
    "isActive": true,
    "picture": "http://placehold.it/32x32",
    "name": "Vaughan Ginkogene Baird",
    "about": "Sunt laboris dolore tempor nisi adipisicing irure incididunt velit nisi commodo non excepteur.",
    "registered": "2014-06-02"
  },
  {
    "index": 81,
    "isActive": true,
    "picture": "http://placehold.it/32x32",
    "name": "Fleming Zentia Graham",
    "about": "Reprehenderit voluptate eiusmod laborum esse proident ea id ullamco Lorem dolore cillum aute.",
    "registered": "2014-08-15"
  },
  {
    "index": 49,
    "isActive": false,
    "picture": "http://placehold.it/32x32",
    "name": "Lawson Zytrac Hobbs",
    "about": "Nisi culpa velit enim sint voluptate dolore.",
    "registered": "2015-02-01"
  },
  {
    "index": 76,
    "isActive": true,
    "picture": "http://placehold.it/32x32",
    "name": "Mcmahon Wazzu Talley",
    "about": "Do dolore elit labore ut magna amet nulla esse incididunt magna.",
    "registered": "2015-02-15"
  },
  {
    "index": 15,
    "isActive": true,
    "picture": "http://placehold.it/32x32",
    "name": "Josefina Sentia Lindsey",
    "about": "Magna est magna elit enim fugiat sunt laborum.",
    "registered": "2014-02-27"
  },
  {
    "index": 68,
    "isActive": false,
    "picture": "http://placehold.it/32x32",
    "name": "Geraldine Comtrak Sparks",
    "about": "Ad non fugiat fugiat excepteur aute do pariatur magna aute ut eu reprehenderit eu.",
    "registered": "2014-02-21"
  },
  {
    "index": 91,
    "isActive": true,
    "picture": "http://placehold.it/32x32",
   ...

JavaScript

$.fn.avzJSON = function(opsi) {
    var par = $.extend({
        jPageIndex:1, // if use pagin, must <=1
        jLimit:5,
        jPaginationTarget:undefined,
        jv:undefined
    },opsi);
    var _dataTotal = par.jv.length;
    var _pageTotal = Math.ceil(_dataTotal/par.jLimit);
    var _pageOffset = Number();
    if(typeof par.jPaginationTarget !== "undefined") {
        _pageOffset = (par.jPageIndex-1)*par.jLimit;
        //console.log(_pageOffset);
        par.jPaginationTarget.html("");
        for(var i = 1; i < (_pageTotal+1); i++) {
            par.jPaginationTarget.append("<button type=\"button\" onclick=\"jlist2("+i+")\">"+i+"</button>");
        }
    }
    this.html("");
    for(var i = _pageOffset; i < (par.jLimit*par.jPageIndex); i++) {
        if(typeof par.jv[i] !== "undefined") {
            this.append(listTPL(par.jv, i));
        }
    }
};
function listTPL(o,i) {
    var tpl = "<li>"+o[i].name+"</li>";
    return tpl;
}
$( "#list1" ).avzJSON({ jv:myJsonData,jLimit:2 });

var list2opsi = {
    jv:myJsonData,
    jPageIndex:1,
    jPaginationTarget:$("#list2pagin-result")
};
function jlist2(i) {
    list2opsi.jPageIndex = i;
    $( "#list2" ).avzJSON(list2opsi);
}
jlist2(list2opsi.jPageIndex);