why i can not see the datatable even the data returned is correct

15 views Asked by At

i have datatable that take it's sructure (columns,data,etc) from server side (php +mysql) because i want to make its column dynamic , but i can not see the datatable even if the response is correct , as a note : i use dt-1.11.4/datatables.min.js here is the response form server side :

{
  "draw": "1",
  "columns": [
    "operation_code",
    "operation_name",
    "valuation_date",
    "category_id",
    "client",
    "client_group",
    "government",
    "city",
    "area",
    "station",
    "district",
    "section",
    "village",
    "residential_area",
    "street",
    "address",
    "meterPrice",
    "totalPrice",
    "sale",
    "rent",
    "licence"
  ],
  "recordsTotal": 1,
  "recordsFiltered": 1,
  "data": [
    [
      "adad-PR-qew-qweqe",
      " ad ad ad -",
      "2021-04-02",
      "131",
      "tt ff rrr",
      "بنوك",
      "nothing",
      "nothing",
      "455.89",
      "nothing",
      "nothing",
      "nothing",
      "nothing",
      "nothing",
      "nothing",
      "",
      "33",
      "44",
      "1",
      "0",
      "6"
    ]
  ]
}

and here is the full code

  <script type="text/javascript">
        $(document).ready(function () {
            var table;
            var operation_code;
            var operation_name;
            table = $('#example2').DataTable({
                scrollCollapse: true,
                responsive: true,
                "processing": true,
                "serverSide": true,
                "order": [],
                rowId: 'staffId',
                "ajax": {
                    "url": "<?php echo site_url(ADMIN_URL . '/advanced_search/ajax_list');?>",
                    "type": "POST",
                    "data": function (d) {
                        var operation_code = $('#operation_code').val();
                        var operation_name = $('#operation_name').val();
                        d.operation_code = operation_code;
                        d.operation_name = operation_name;
                    },
                  "dataSrc": function (json) {
                      // extract column titles from Ajax response
                      var columns = [];
                      if (json.columns) {
                          json.columns.forEach(function(column) {
                              columns.push({ "title": column, "data": column });
                          });
                      }
                      return {
                          "draw": json.draw,
                          "recordsTotal": json.recordsTotal,
                          "recordsFiltered": json.recordsFiltered,
                          "data": json.data,
                          "columns": columns // pass column definitions to DataTable
                      };
                    }
                },
                "language": {
                    "decimal": "",
                    "sInfo": "إظهار _START_ إلى _END_ من أصل _TOTAL_ عنصر",
                    "sInfoEmpty": "يعرض 0 إلى 0 من أصل 0 عنصر",
                    "sInfoFiltered": "(منتقاة من مجموع _MAX_ عنصر)",
                    "infoPostFix": "",
                    "thousands": ",",
                    "sLengthMenu": "أظهر _MENU_ عنصر",
                    "loadingRecords": "جاري التحميل...",
                    "processing": "جاري التنفيذ...",
                    "search": "بحث للكل ",
                    "zeroRecords": "لا توجد بيانات مطابقة لبحثك",
                    "paginate": {
                        "first": "الأول",
                        "last": "الأخير",
                        "next": "التالي",
                        "previous": "السابق"
                    },
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    }
                },
                "stripeClasses": ['', '']
            });
    
            $(".frm_search").click(function () {
                table.ajax.reload();
            });
        });
    
    </script>
0

There are 0 answers