Selection Data Problem

JohnValde

Hello everyone!

First of all, i'm sorry for my language. I hope to describe our problem correctly.

I have a page that contains a svg map. When you clicked any city on the map, The table comes under the map. I'm using JSON as a database. An example of them:

{ "balikesir": {
    "bayiler": [{
        "bayiAdi": "Oto",
        "stok": "125",
        "bolge": "2. Bölge",
        "yas": "50",
        "nsSkoru": "23"
      },
      {
        "bayiAdi": "Ahmet Oto",
        "stok": "1252",
        "bolge": "98. Bölge",
        "yas": "32",
        "nsSkoru": "256"
      }],
    "name": "Balıkesir",
    "county": "10",
    "value": "notSelected",
    "path": "M 141.46624,347.76982 C 140.65523,346.20149 138.88495,344.19317 137.53229,343.30687 C 134.64135,341.41265 131.88945,336.32757 131.88945,332.87978 C 131.88945,330.60453 131.63487,330.48854 127.99208,331.10398 C 125.59855,331.50836 123.8394,331.34935 123.43306,330.69188 C 123.06915,330.10307 121.15295,329.62132 119.17482,329.62132 C 116.87917,329.62132 114.39265,328.71703 112.30056,327.12132 C 108.80148,324.45244 105.95898,323.95179 104.21379,325.69698 C 103.44623,326.46454 101.62355,326.32287 97.850526,325.2024 C 92.07415,323.487 86.237687,324.29187 83.883494,327.1285 C 83.20208,327.94955 81.879823,328.62132 80.945145,328.62132 C 80.010466,328.62132 77.478066,329.9588 75.317589,331.5935 C 70.580585,335.1777 70.118789,335.24512 69.709001,332.41231 C 69.51335,331.05981 68.420121,329.93114 66.88945,329.50135 L 64.38945,328.79938 L 66.63945,328.09372 C 67.87695,327.70561 68.88945,327.04514 68.88945,326.62601 C 68.88945,326.20688 70.23945,325.30477 71.88945,324.62132 C 73.53945,323.93787 74.88945,322.75827 74.88945,322 C 74.88945,321.24173 75.56445,320.62132 76.38945,320.62132 C 77.21445,320.62132 77.88945,319.94632 77.88945,319.12132 C 77.88945,318.29632 78.717218,317.62132 79.728935,317.62132 C 81.801855,317.62132 84.128399,313.40759 83.278437,311.19262 C 82.842679,310.05705 80.994307,309.8022 74.805275,310.02434 C 65.938717,310.34259 65.280293,309.71684 69.077508,304.58083 C 70.88161,302.14065 71.983174,301.62132 75.355002,301.62132 C 77.604192,301.62132 80.437188,300.92597 81.650549,300.0761 C 83.644259,298.67965 84.314676,298.68638 88.613831,300.14598 C 91.230274,301.03429 94.180181,302.62963 95.16918,303.6912 C 97.655126,306.35955 100.5256,306.09801 106.52611,302.65644 C 110.09632,300.60876 111.99503,298.7572 112.75232,296.58486 C 114.26515,292.24513 113.13163,281.75403 110.78878,278.41181 C 109.74415,276.92158 108.88945,275.4009 108.88945,275.03252 C 108.88945,273.73627 118.12599,265.7788 120.24486,265.2496 C 121.42438,264.955 124.13885,265.10969 126.277,265.59336 C 129.58662,266.34201 130.73876,266.11027 134.027,264.03449 C 136.1645,262.68515 137.88945,262.10611 137.88945,262.73794 C 137.88945,263.5435 139.67538,263.6776 143.95519,263.19339 C 149.69246,262.54429 149.96617,262.60944 149.00979,264.39647 C 148.45366,265.43561 147.30139,266.86447 146.4492,267.57173 C 144.40986,269.26424 145.36658,278.8271 148.01669,283.23935 C 149.04671,284.95427 149.89933,287.42927 149.91141,288.73935 C 149.92349,290.04944 150.77934,292.98435 151.8133,295.26139 C 153.25337,298.43278 154.53917,299.68064 157.30873,300.59468 C 159.62281,301.3584 161.48329,302.869 162.47736,304.79133 C 163.94093,307.62156 164.32682,307.77534 169.16915,307.45804 C 174.28162,307.12304 174.3129,307.13916 175.30677,310.62132 C 176.88213,316.14081 179.01964,317.87512 183.26529,317.07864 C 187.84674,316.21915 188.99747,318.39724 185.98516,322.22678 C 184.82613,323.70024 183.88945,326.35536 183.88945,328.16729 C 183.88945,331.81276 179.66393,336.22414 175.31238,337.12161 C 173.97977,337.39645 171.76445,337.85489 170.38945,338.14037 C 167.705,338.69772 167.24071,340.54061 168.97047,343.77271 C 169.56503,344.88366 169.84886,345.99524 169.60121,346.24289 C 169.35356,346.49055 164.9296,347.15944 159.77019,347.72933 C 154.61078,348.29921 149.96195,349.18305 149.43945,349.6934 C 148.91695,350.20376 147.24101,350.62132 145.71513,350.62132 C 143.67607,350.62132 142.55001,349.8656 141.46624,347.76982 z M 133.88945,259.94269 C 131.93243,259.35998 127.74982,252.82565 128.88483,252.12418 C 130.0351,251.41327 138.43378,253.31869 141.70516,255.03275 L 144.2796,256.38163 L 140.12436,258.50148 C 137.83898,259.66739 135.8387,260.56912 135.67929,260.50532 C 135.51988,260.44152 134.71445,260.18833 133.88945,259.94269 z M 121.23453,245.07819 C 120.90884,244.22947 120.87675,243.30069 121.16321,243.01423 C 122.17755,241.99988 127.99922,242.33109 129.13595,243.46782 C 130.00728,244.33915 129.76573,244.62132 128.14847,244.62132 C 126.97093,244.62132 125.72937,245.07132 125.38945,245.62132 C 124.44705,247.14615 121.90033,246.81325 121.23453,245.07819 z "
  },
}

My index.html codes below:

<script type="text/javascript">
    $(function(){
        $("#map svg path").click(
          function() {
            var id=$(this).attr("id");

            $("#sehiradi").html("Seçilen Şehir: <strong>"+paths[id].name+"</strong>");


var bayilero = paths[id].bayiler

if (bayilero == undefined) {

$('#test').dataTable().fnClearTable();

    $('#test').html("Gösterilecek tablo yok. Bayi girilmemiş.");

} 

else {

$('#test').dataTable({
    data: bayilero,
        columns: [
        { data: 'bayiAdi' },
        { data: 'stok' },
        { data: 'bolge' },
        { data: 'yas' },
        { data: 'nsSkoru' }
    ]
});


$('#test').dataTable().fnClearTable();


var bayilero2 = paths[id].bayiler

$('#test').dataTable().fnAddData(bayilero2);

}
         });
    })
</script>

<table id="test" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
            </tr>
        </thead>
        
    </table>

When i clicked a city on the map, i want to show all datas of this city on the table Than, i clicked another city, DataTables gave an error.

For datatables version:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sl-1.2.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/b-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sl-1.2.6/datatables.min.js"></script>


<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
 
<script type="text/javascript" src="DataTables/datatables.min.js"></script>

Thank you so much.

kthorngren

What is the error you are getting?

Most Datatables alert messages have a troubleshooting link. You can start by following the steps in the link and if that doesn't help then please post the error message and what you tried from the troubleshooting steps.

Kevin

JohnValde

Hi Kevin!

Thank you for feedback.

I have 2 problems:

1) DataTable JS Problem

My page is working on only Web Browser. I dont have any server Xampp etc.

you can see My JSON data below. "balıkesir" and "bilecik" are city. "balıkesir" has "bayiler" string but bilecik doesn't.

 "balikesir": {
    "bayiler": [{
        "bayiAdi": "berkOto",
        "stok": "125",
        "bolge": "2. Bölge",
        "yas": "50",
        "nsSkoru": "23"
      },
      {
        "bayiAdi": "onurOto",
        "stok": "1252",
        "bolge": "98. Bölge",
        "yas": "32",
        "nsSkoru": "256"
      }],
    "name": "Balıkesir",
    "county": "10",
    "value": "notSelected"
  },
  "bilecik": {
    "name": "bilecik",
    "county": "11",
    "value": "notSelected"
  },

****First Scenario****
* Page was loaded.
* I clicked Balıkesir. (There is "bayiler" data in Balıkesir city in my JSON)
* dataTable is working. All "bayiler" datas of Balıkesir was shown in the dataTable.
* I clicked Bilecek.
* "No data available." in the dataTable.
* Everything is going well.

****Second Scenario****
* Page was loaded.
* I clicked Bilecik.( There isn'y any "bayiler" data in this city.)
* "No data available." in the dataTable.
* Than i clicked Balıkesir. (There is "bayiler" data in this city in JSON)
* Error! "DataTables warning: table id=test - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

How can i fix this problem?

My codes below:

<script type="text/javascript">
    $(function(){
        $("#map svg path").click(
          function() {
            var id=$(this).attr("id");

            $("#sehiradi").html("Seçilen Şehir: <strong>"+paths[id].name+"</strong>");


var bayilero = paths[id].bayiler;

if (bayilero == undefined) {

    if ( $.fn.dataTable.isDataTable( '#test' ) ) {
    table = $('#test').DataTable();
}
else {
    table = $('#test').DataTable( {
        paging: false,
        searching: false,
        retrieve: true
    } );
}

 $('#test').dataTable().fnClearTable();

} 

else {

var bayilero = paths[id].bayiler;

$('#test').dataTable({
    paging: false,
    retrieve: true,
    data: bayilero,
    "language": {
                       "decimal": "",
                       "emptyTable": "Tabloda mevcut kayıt yok",
                       "info": " _TOTAL_ Kayıttan _START_ - _END_ Arası Kayıtlar",
                       "infoEmpty": "Kayıt Yok",
                       "infoFiltered": "( _MAX_ kayıt arasından filtrelendi)",
                       "infoPostFix": "",
                       "thousands": ",",
                       "lengthMenu": "İlk _MENU_ kaydı göster ",
                       "loadingRecords": "Yükleniyor...",
                       "processing": "Arama yapılıyor, lütfen bekleyiniz",
                       "search": "Arama:",
                       "zeroRecords": "Aradığınız Kayıt Yok",
                       "paginate":
                           {
                               "first": "ilk",
                               "last": "son",
                               "next": "sonraki",
                               "previous": "önceki"
                           },
                       "aria": {
                           "sortAscending": ": activate to sort column ascending",
                           "sortDescending": ": activate to sort column descending"
                       }
                   },
        columns: [
        { data: 'bayiAdi' },
        { data: 'stok' },
        { data: 'bolge' },
        { data: 'yas' },
        { data: 'nsSkoru' }
    ]
});


$('#test').dataTable().fnClearTable();

var bayilero2 = paths[id].bayiler

$('#test').dataTable().fnAddData(bayilero2);

}

var anlikDatabase = paths[id].name

if (paths[id].bayi == undefined) {

    $("#sehirdetay").text(paths[id].county+" | Seçilen şehrin bayisi bulunmamaktadır.");


    

}

else

{
    var bayiSayisi = paths[id].bayiler[0];

    for (var i = 1; i < paths[id].bayiler.length; i++) {

        bayiSayisi = bayiSayisi + " <br> " + paths[id].bayiler[i]  ;
    }

    $("#sehirdetay").html(paths[id].county+" <br> "+ bayiSayisi );

}

            
         });
         
         $("#map svg path").each(function(){
            var r=Math.ceil(Math.random() * 255);
            var g=Math.ceil(Math.random() * 255);
            var b=Math.ceil(Math.random() * 255);
            $(this).attr("fill","rgb("+r+", "+g+", "+b+")");
            var rengo = "rgb(" + r + "," + g + "," + b + ")";
         });
    })
</script>

html table code:

<table id="test" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
            </tr>
        </thead>
        
    </table>

allan

you can see My JSON data below. "balıkesir" and "bilecik" are city. "balıkesir" has "bayiler" string but bilecik doesn't.

That's an issue with whatever is generating your JSON. You'd need to check your server-side script for that. It looks like it might be using an object for output rather than an array if there is only one item.

DataTables warning: table id=test - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4"

Can you use the debugger to give me a trace please - click the Upload button and then let me know what the debug code is.

Allan

JohnValde

@allan thank you for reply.

I'm sorry, my fault. It's not a JSON, it's Javascript Object. You can see it in detail below:

var paths = {
  "blank": {
    "name": "blank",
    "path": ""
  },
  "balikesir": {
    "bayiler": [{
        "bayiAdi": "berkOto",
        "stok": "125",
        "bolge": "2. Bölge",
        "yas": "50",
        "nsSkoru": "23"
      },
      {
        "bayiAdi": "onurOto",
        "stok": "1252",
        "bolge": "98. Bölge",
        "yas": "32",
        "nsSkoru": "256"
      }],
    "name": "Balıkesir",
    "county": "10",
    "value": "notSelected",
    "path": "M 141.46624,347.76982 C 140.65523,346.20149 138.88495,344.19317 137.53229,343.30687 C 134.64135,341.41265 131.88945,336.32757 131.88945,332.87978 C 131.88945,330.60453 131.63487,330.48854 127.99208,331.10398 C 125.59855,331.50836 123.8394,331.34935 123.43306,330.69188 C 123.06915,330.10307 121.15295,329.62132 119.17482,329.62132 C 116.87917,329.62132 114.39265,328.71703 112.30056,327.12132 C 108.80148,324.45244 105.95898,323.95179 104.21379,325.69698 C 103.44623,326.46454 101.62355,326.32287 97.850526,325.2024 C 92.07415,323.487 86.237687,324.29187 83.883494,327.1285 C 83.20208,327.94955 81.879823,328.62132 80.945145,328.62132 C 80.010466,328.62132 77.478066,329.9588 75.317589,331.5935 C 70.580585,335.1777 70.118789,335.24512 69.709001,332.41231 C 69.51335,331.05981 68.420121,329.93114 66.88945,329.50135 L 64.38945,328.79938 L 66.63945,328.09372 C 67.87695,327.70561 68.88945,327.04514 68.88945,326.62601 C 68.88945,326.20688 70.23945,325.30477 71.88945,324.62132 C 73.53945,323.93787 74.88945,322.75827 74.88945,322 C 74.88945,321.24173 75.56445,320.62132 76.38945,320.62132 C 77.21445,320.62132 77.88945,319.94632 77.88945,319.12132 C 77.88945,318.29632 78.717218,317.62132 79.728935,317.62132 C 81.801855,317.62132 84.128399,313.40759 83.278437,311.19262 C 82.842679,310.05705 80.994307,309.8022 74.805275,310.02434 C 65.938717,310.34259 65.280293,309.71684 69.077508,304.58083 C 70.88161,302.14065 71.983174,301.62132 75.355002,301.62132 C 77.604192,301.62132 80.437188,300.92597 81.650549,300.0761 C 83.644259,298.67965 84.314676,298.68638 88.613831,300.14598 C 91.230274,301.03429 94.180181,302.62963 95.16918,303.6912 C 97.655126,306.35955 100.5256,306.09801 106.52611,302.65644 C 110.09632,300.60876 111.99503,298.7572 112.75232,296.58486 C 114.26515,292.24513 113.13163,281.75403 110.78878,278.41181 C 109.74415,276.92158 108.88945,275.4009 108.88945,275.03252 C 108.88945,273.73627 118.12599,265.7788 120.24486,265.2496 C 121.42438,264.955 124.13885,265.10969 126.277,265.59336 C 129.58662,266.34201 130.73876,266.11027 134.027,264.03449 C 136.1645,262.68515 137.88945,262.10611 137.88945,262.73794 C 137.88945,263.5435 139.67538,263.6776 143.95519,263.19339 C 149.69246,262.54429 149.96617,262.60944 149.00979,264.39647 C 148.45366,265.43561 147.30139,266.86447 146.4492,267.57173 C 144.40986,269.26424 145.36658,278.8271 148.01669,283.23935 C 149.04671,284.95427 149.89933,287.42927 149.91141,288.73935 C 149.92349,290.04944 150.77934,292.98435 151.8133,295.26139 C 153.25337,298.43278 154.53917,299.68064 157.30873,300.59468 C 159.62281,301.3584 161.48329,302.869 162.47736,304.79133 C 163.94093,307.62156 164.32682,307.77534 169.16915,307.45804 C 174.28162,307.12304 174.3129,307.13916 175.30677,310.62132 C 176.88213,316.14081 179.01964,317.87512 183.26529,317.07864 C 187.84674,316.21915 188.99747,318.39724 185.98516,322.22678 C 184.82613,323.70024 183.88945,326.35536 183.88945,328.16729 C 183.88945,331.81276 179.66393,336.22414 175.31238,337.12161 C 173.97977,337.39645 171.76445,337.85489 170.38945,338.14037 C 167.705,338.69772 167.24071,340.54061 168.97047,343.77271 C 169.56503,344.88366 169.84886,345.99524 169.60121,346.24289 C 169.35356,346.49055 164.9296,347.15944 159.77019,347.72933 C 154.61078,348.29921 149.96195,349.18305 149.43945,349.6934 C 148.91695,350.20376 147.24101,350.62132 145.71513,350.62132 C 143.67607,350.62132 142.55001,349.8656 141.46624,347.76982 z M 133.88945,259.94269 C 131.93243,259.35998 127.74982,252.82565 128.88483,252.12418 C 130.0351,251.41327 138.43378,253.31869 141.70516,255.03275 L 144.2796,256.38163 L 140.12436,258.50148 C 137.83898,259.66739 135.8387,260.56912 135.67929,260.50532 C 135.51988,260.44152 134.71445,260.18833 133.88945,259.94269 z M 121.23453,245.07819 C 120.90884,244.22947 120.87675,243.30069 121.16321,243.01423 C 122.17755,241.99988 127.99922,242.33109 129.13595,243.46782 C 130.00728,244.33915 129.76573,244.62132 128.14847,244.62132 C 126.97093,244.62132 125.72937,245.07132 125.38945,245.62132 C 124.44705,247.14615 121.90033,246.81325 121.23453,245.07819 z "
  },
  "bilecik": {
    "name": "bilecik",
    "county": "11",
    "value": "notSelected",
    "path": "M 236.86925,316.25782 L 230.38945,314.02059 L 230.4832,308.57095 C 230.53476,305.57366 230.93513,301.40921 231.37291,299.31664 C 231.85808,296.99757 231.75645,294.65475 231.11263,293.31664 C 228.67771,288.25587 228.89804,286.42921 232.44293,282.28781 C 235.4485,278.77647 235.88945,277.57085 235.88945,272.8644 C 235.88945,268.23271 236.30392,267.05301 238.81253,264.5444 C 242.49878,260.85814 243.48962,260.87219 244.23945,264.62132 C 244.68083,266.82823 245.40271,267.62132 246.97009,267.62132 C 248.14195,267.62132 250.45125,268.7577 252.10187,270.1466 C 254.51988,272.18123 255.76101,272.54844 258.48965,272.03654 C 262.60019,271.2654 266.88664,272.21055 266.89715,273.89037 C 266.90139,274.56739 268.70139,276.14726 270.89715,277.40118 C 273.49968,278.88739 274.88945,280.38976 274.88945,281.71692 C 274.88945,282.83666 275.33649,284.58811 275.88288,285.60905 C 276.72162,287.17625 276.43161,287.56297 274.02039,288.09256 C 270.66116,288.83037 266.60161,293.08129 265.88053,296.61614 C 265.56308,298.17229 264.15307,299.68633 262.13294,300.64018 C 260.35168,301.48125 258.19268,303.17109 257.33516,304.39536 C 256.0939,306.16751 254.80379,306.62132 251.00706,306.62132 C 247.31507,306.62132 245.74705,307.144 244.06376,308.93577 C 241.69258,311.45978 241.14386,316.18837 243.13945,316.90108 C 243.82695,317.14662 244.15536,317.60571 243.86925,317.92128 C 243.58314,318.23685 240.43314,317.4883 236.86925,316.25782 z"
  }
}

my debug code is axalan

allan

Was the debug trace taken at the point when the error occurred? It still looks like bilecik should be an array?

Allan