কীভাবে ম্যানুয়ালি নতুন জেএসএন ডেটা সহ ডেটাবেবল টেবিল আপডেট করবেন

Question 1

আমি প্লাগইন jQuery ডেটাবেবল ব্যবহার করছি ডেটা এবং আমার ডেটা যা লোড করে পৃষ্ঠার নীচে DOM এ লোড করেছি এবং প্লাগইনটি এইভাবে শুরু করি:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

এখন কিছু পদক্ষেপ নেওয়ার পরে আমি এজ্যাক্স ব্যবহার করে নতুন ডেটা পেতে চাই (তবে ডেটাটেবলে অ্যাজাক্স অপশনটি বিল্ড নয় - আমাকে ভুল করবেন না!) এবং এই ডেটাগুলি সহ টেবিলটি আপডেট করুন। ডেটাবেলস এপিআই ব্যবহার করে আমি কীভাবে এটি করতে পারি? ডকুমেন্টেশন খুব বিভ্রান্তিকর এবং আমি এর সমাধান খুঁজে পাচ্ছি না। যে কোন সাহায্য প্রসংসিত হবে। ধন্যবাদ

Question 2

সমাধান: (লক্ষ্য করুন: এই সমাধানটি ডেটাবেবল সংস্করণ 1.10.4 (এই মুহুর্তে) লিগ্যাসি সংস্করণ নয়) এর জন্য is

শোধন প্রতি এপিআই ডকুমেন্টেশন (1.10.15), এপিআই তিনটি উপায়ে অ্যাক্সেস করা যেতে পারে:

ডেটা টেবিলগুলির আধুনিক সংজ্ঞা (আপার উটের ক্ষেত্রে):

var datatable = $( selector ).DataTable();
ডেটা টেবিলের উত্তরাধিকার সংজ্ঞা (নিম্ন উটের ক্ষেত্রে):

var datatable = $( selector ).dataTable().api();
newবাক্য গঠন ব্যবহার করে ।

var datatable = new $.fn.dataTable.Api( selector );

তারপরে ডেটা লোড করুন:

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

draw(false)ডেটা আপডেট হওয়ার পরে একই পৃষ্ঠায় থাকতে ব্যবহার করুন ।

এপিআই রেফারেন্স:

https://datatables.net/references/api/clear ()

https://datatables.net/references/api/rows.add ()

https://datatables.net/references/api/draw ()

Question 3

তুমি ব্যবহার করতে পার:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

জেসফিডল

হালনাগাদ. এবং হ্যাঁ বর্তমান ডকুমেন্টেশনগুলি তেমন ভাল না তবে আপনি যদি পুরানো সংস্করণ ব্যবহার করে ঠিক থাকেন তবে আপনি লিগ্যাসির ডকুমেন্টেশন উল্লেখ করতে পারেন ।

Question 4

আপনাকে পুরানো ডেটা-টেবিলের উদাহরণটি ধ্বংস করতে হবে এবং তারপরে ডেটা টেবিলটি নতুন করে শুরু করতে হবে

Check .fn.dataTable.isDataTable ব্যবহার করে ডেটা-টেবিলের উদাহরণ উপস্থিত রয়েছে কিনা তা প্রথমে পরীক্ষা করুন

যদি বিদ্যমান থাকে তবে এটিকে ধ্বংস করুন এবং তারপরে নতুন এই উদাহরণ তৈরি করুন

    if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });

Question 5

লিগ্যাসি ডেটাটেবল 1.9.4 এর সমাধান এখানে

    var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);

Question 6

আমার ক্ষেত্রে, আমি জেসনকে টেবিলটিতে খাওয়ানোর জন্য বিল্ট ইন অ্যাজ্যাক্স এপিআই ব্যবহার করছি না (এটি এমন কিছু ফর্ম্যাটিংয়ের কারণে যা ডেট্যাটেবলের রেন্ডার কলব্যাকের ভিতরে প্রয়োগ করা বরং কঠিন ছিল)।

আমার সমাধানটি হ'ল অন্লোড ফাংশনগুলির বাহ্যিক স্কোপ এবং ডেটা রিফ্রেশ পরিচালনা করে এমন ফাংশন ( var table = nullযেমন উদাহরণস্বরূপ) এর ভেরিয়েবল তৈরি করা ।

তারপরে আমি লোড পদ্ধতিতে আমার টেবিলটি ইনস্ট্যান্ট করি

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

এবং পরিশেষে, সেই ফাংশনে যা রিফ্রেশ পরিচালনা করে, আমি পরিষ্কার () এবং ধ্বংস () পদ্ধতিটি উপস্থাপন করি, এইচটিএমএল টেবিলের মধ্যে ডেটা আনতে এবং ডেটাটেবলটিকে পুনরায় ইনস্ট্যান্ট করি:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

আমি আশা করি কেউ এই দরকারী খুঁজে পেয়েছে!