Vue

by omerx

HTML

<!DOCTYPE html>
<html lang="tr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <script src="node_modules/vue/dist/vue.min.js"></script>

    <link
      href="node_modules/bootstrap/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />

    <link
      rel="stylesheet"
      href="node_modules/bootstrap-icons/font/bootstrap-icons.css"
    />
  </head>
  <body>
    <div class="container" id="app">
            <div class="row">
              <div class="col-12">
<form id="urlParameterForm">
<input type="date" name="startDate" id="startDate">
<input type="date" name="endDate" id="endDate">
<input type="number" name="pageNumber" id="pageNumber" value="1" v-on:input="changePage">
<input type="submit" value="Filter" id="Filter">
   <p>Page : {{ pageActive }}</p>
   </form>
              </div>
            </div>
      <div class="row">
        <div class="card-deck">
          <div class="card" v-for="dta in dataTable">
            <img class="card-img-top" v-bind:src="(dta.bolge+'.jpg')" />
            <div class="card-body">
              <h5 class="card-title">{{dta.bolge}}</h5>
              <p class="card-text">{{dta.sube}}</p>
              <p class="card-text">
                <small class="text-muted">Total Amount {{dta.netTutar}} .</small>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script
      src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    ></script>
    <script src="page1.js"></script>
  </body>
</html>

CSS

/* data1.json */
{
  "dataTable": [
    {
      "bolge": "Akdeniz",
      "sube": "Adana Subesi",
      "netTutar": 6.499374000000016e+004
    },
    {
      "bolge": "İç Anadolu",
      "sube": "Aksaray Subesi",
      "netTutar": 1.234576999999999e+004
    },
    {
      "bolge": "Doğu Anadolu",
      "sube": "Ardahan Subesi",
      "netTutar": 2.887150000000001e+003
    },
    {
      "bolge": "Güneydoğu Anadolu",
      "sube": "Batman Subesi",
      "netTutar": 1.701832999999997e+004
    },
    {
      "bolge": "Karadeniz",
      "sube": "Çorum Subesi",
      "netTutar": 1.663578999999996e+004
    },
    {
      "bolge": "Doğu Anadolu",
      "sube": "Erzurum Subesi",
      "netTutar": 2.212622999999991e+004
    },
    {
      "bolge": "İç Anadolu",
      "sube": "Eskişehir Subesi",
      "netTutar": 2.628607999999991e+004
    },
    {
      "bolge": "Akdeniz",
      "sube": "Isparta Subesi",
      "netTutar": 1.462259999999998e+004
    },
    {
      "bolge": "İç Anadolu",
      "sube": "Karaman Subesi",
      "netTutar": 7.776750000000006e+003
    },
    {
      "bolge": "İç Anadolu",
      "sube": "Kırıkkale Subesi",
      "netTutar": 8.855070000000003e+003
    },
    {
      "bolge": "Doğu Anadolu",
      "sube": "Muş Subesi",
      "netTutar": 1.199937999999999e+004
    },
    {
      "bolge": "Marmara",
      "sube": "Sakarya Subesi",
      "netTutar": 2.829720999999989e+004
    },
    {
      "bolge": "Güneydoğu Anadolu",
      "sube": "Şanlıurfa Subesi",
      "netTutar": 5.823557000000007e+004
    },
    {
      "bolge": "Güneydoğu Anadolu",
      "sube": "Şırnak Subesi",
      "netTutar": 1.675855999999997e+004
    },
    {
      "bolge": "Karadeniz",
      "sube": "Trabzon Subesi",
      "netTutar": 2.097863999999994e+004
    },
    {
      "bolge": "Doğu Anadolu",
      "sube": "Van Subesi",
      "netTutar": 3.528952999999987e+004
    },
    {
      "bolge": "Ege",
      "sube": "Afyonkarahisar Subesi",
      "netTutar": 1.972799999999994e+004
   ...

Vue

const app = new Vue({
    el: "#app",
    data: {
        dataTable: [],
        pageNumber: 1,
        pageActive: 0,
        url: './data1.json?pg=' + pageNumber + ''
    },
    methods: {

        changePage: function (event) {
            this.pageNumber = event.target.value;
            this.pageActive = event.target.value;
        },

        loadJSON(callback) {

            var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
            xobj.open('GET', this.url, true)
            xobj.onreadystatechange = function () {
                if (xobj.readyState == 4 && xobj.status == "200") {
                    callback(xobj.responseText);
                }
            };
            xobj.send(null);
        },
        init() {
            let that = this
            that.loadJSON(function (response) {
                var data = JSON.parse(response);
                that.dataTable = data.dataTable
            });
        }
    },
    mounted() {
        this.init()
    }

})