jQuery DataTables: টেবিল প্রস্থ নিয়ন্ত্রণ করুন

Question

JQuery DataTables প্লাগইন ব্যবহার করে আমার কোনও টেবিলের প্রস্থ নিয়ন্ত্রণ করতে সমস্যা হচ্ছে। সারণীটি ধারক প্রস্থের 100% হওয়ার কথা, তবে ধারক প্রস্থের চেয়ে কম নির্বিচারে প্রস্থ হিসাবে শেষ হয়।

পরামর্শ প্রশংসা

সারণী ঘোষণার মত দেখাচ্ছে

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

এবং জাভাস্ক্রিপ্ট

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

ফায়ারব্যাগে এইচটিএমএল পরিদর্শন করে, আপনি এটি দেখতে পাবেন (যুক্ত শৈলী = "প্রস্থ: 0 পিক্স;" নোট করুন)

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

স্টাইলগুলিতে ফায়ারব্যাগের দিকে তাকানো, টেবিল.ডিসপ্লে স্টাইলটি ওভাররাইড করা হয়েছে। দেখতে পাচ্ছি না এ কোথা থেকে আসছে

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

Comments

এফওয়াইআই, আমি সবেমাত্র একটি সমস্যার মুখোমুখি হয়েছি যেখানে আই 8 এ একটি কলাম সঠিকভাবে সামঞ্জস্য করছে না। অপরাধী একটি চিত্র ছিল যা max-widthসম্পত্তি সেট ছিল। দৃশ্যত আইই 8 এই সম্পত্তিটি খুব বেশি পছন্দ করে না এবং ডেট্যাটেবলের সাথে সম্পর্কিত ক্ষেত্রে এটিকে উপেক্ষা করেছেন, যদিও চিত্রটি স্ক্রিনে সংশোধনযোগ্য আকারের ছিল। widthসমস্যাটি স্থির করে এটি পরিবর্তন করা ।

— জন Bubriski

Answer 1

সমস্যাটি কারণটি ডেটা টেবিলকে অবশ্যই এর প্রস্থ গণনা করতে পারে - তবে কোনও ট্যাবের অভ্যন্তরে ব্যবহার করার সময় এটি দৃশ্যমান নয়, সুতরাং প্রস্থগুলি গণনা করতে পারে না। সমাধানটি যখন ট্যাব দেখায় তখন 'fnAd समायोजित কলামসাইজিং' কল করা হয়।

উপস্থাপনা

এই উদাহরণটি দেখায় যে কীভাবে স্ক্রলিংয়ের সাথে ডেটা টেবিলগুলি jQuery UI ট্যাবগুলির সাথে একসাথে ব্যবহার করা যেতে পারে (বা প্রকৃতপক্ষে অন্য কোনও পদ্ধতি যার মাধ্যমে টেবিলটি গোপনে প্রদর্শিত (প্রদর্শন: কিছুই নয়) যখন এটি শুরু করা হয়)। যে কারণে এটি বিশেষ বিবেচনার প্রয়োজন, তা হ'ল যখন ডেটা টেবিলগুলি আরম্ভ করা হয় এবং এটি কোনও লুকানো উপাদানের মধ্যে থাকে তখন ব্রাউজারের সাথে ডেটাবেলগুলি দেওয়ার জন্য কোনও পরিমাপ থাকে না এবং যখন স্ক্রোলিং সক্ষম করা হয় তখন কলামের বিভক্তকরণের জন্য এটির প্রয়োজন হবে।

এটির কাছাকাছি আসার পদ্ধতিটি হ'ল fnAdjustColumnSizing API ফাংশনটি কল করা। এই ফাংশনটি বর্তমান তথ্যের উপর ভিত্তি করে প্রয়োজনীয় কলাম প্রস্থগুলি গণনা করবে এবং তারপরে টেবিলটি পুনরায় আঁকবে - টেবিলটি প্রথমবারের জন্য দৃশ্যমান হওয়ার পরে ঠিক এটির প্রয়োজন। এর জন্য আমরা jQuery UI টেবিলগুলি সরবরাহ করে 'শো' পদ্ধতিটি ব্যবহার করি। আমরা ডাটাবেলটি তৈরি করা হয়েছে কিনা তা পরীক্ষা করে দেখি ('ডিভডাটাবেলস_সক্রোলবিডি'র জন্য অতিরিক্ত নির্বাচককে নোট করুন, ডেটা টেবিলটি আরম্ভ করার সময় এটি যুক্ত করা হয়)। যদি টেবিলটি আরম্ভ করা হয়ে থাকে তবে আমরা এটির পুনরায় আকার দেব। কেবলমাত্র টেবিলের প্রথম প্রদর্শনীর পুনরায় আকারে একটি অপ্টিমাইজেশন যুক্ত করা যেতে পারে।

সূচনা কোড code

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

দেখুন এই আরও তথ্যের জন্য।

Comments

@ জন ম্যাকসির সাথে আমারও একই সমস্যা রয়েছে, তবে আমি আমার ডেটাটেবলটি একটি মডেলে প্রয়োগ করেছি, আমি বুটস্ট্র্যাপ ব্যবহার করছি এবং আমি এই সমস্যাটির সাথে আটকে গেলাম ... আপনি কী জানেন কীভাবে এটি ট্যাবগুলির পরিবর্তে বুটস্ট্র্যাপ মডেল ব্যবহার করে কার্যকর করা যায় ?. .i সত্যিই আপনার সহায়তা দরকার

— সিএফজেড

আমি ব্যবহার করার পরামর্শ window.resize

— দিচ্ছি

"এও কলামডেফস": [s "এসডউইথ": "10%", "এটারাজেটস": [-1]।]। আমি আমার সমস্যাটি ঠিক করেছি কেবল এটি যুক্ত করুন, আপনাকে ধন্যবাদ।

— মিনা চেন

Answer 2

আপনি যখন ডেটা টেবিলগুলি আরম্ভ করবেন তখন আপনি দুটি ভেরিয়েবল মুছে ফেলতে চাইবেন: bAutoWidthএবংaoColumns.sWidth

ধরে নিলাম আপনার কাছে 50px, 100, 120px এবং 30px প্রস্থের 4 টি কলাম রয়েছে:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

ডেটা টেবিলগুলির সূচনা সম্পর্কে আরও তথ্য http://datatables.net/usage এ পাওয়া যাবে

আপনার প্রয়োগ করা বিধাদগুলির এই সেটিংস এবং সিএসএসের মধ্যে মিথস্ক্রিয়াটি দেখুন। আপনি কতটা কাছাকাছি আসছেন তা দেখার চেষ্টা করার আগে আপনি আপনার বিদ্যমান সিএসএসের মন্তব্য করতে পারেন।

Comments

মিমি। আপনি যা বলছেন তা হ'ল এটি বোআউউইথের ফলাফল: কলামের প্রস্থের জন্য বিশেষভাবে বুদ্ধিমান পছন্দ নয় true

— জন ম্যাক

এটাই আমার মনে হয়। ডেটা দৈর্ঘ্যের সাথে বেমানান থাকলে আমার টেবিলগুলি চারদিকে বাউন্স করে। এজন্য আমি আও কলামগুলি এবং বউআউথউইথ পরামিতিগুলি রেখেছি।

— আর্টলুং

সুন্দর আমার সমস্যাটি পুরোপুরি ঠিক করে দিয়েছে।

— লেগুনা

অসাধারণ @ লেগুনা! এইরকম পুরানো উত্তরগুলি শুনে সহায়ক হতে সাহায্য করে।

— আর্টলং

"bAutoWidth": মিথ্যা কাজ। তবে শুধু একটি প্রশ্ন। আমার <ম> ট্যাগগুলিতে প্রস্থের বিশদ রাখলে কি এটি একটি ভাল অনুশীলন বা না?

— ফিন দ্য হিউম্যান

Answer 3

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

Comments

এটি আমার জন্য সঠিক উত্তর ছিল। আমি বুস্ট্র্যাপ। টেবিল-প্রতিক্রিয়াশীল ব্যবহার করছি। ডেটেবল কোড সেটিংসের সাথে এটির নিজস্ব প্রস্থ, এটি পথে যায়।

— mac10688

এই বোকা সমস্যার আমার সমাধান পোস্ট করতে এখানে এসেছিল যা ট্যাব পরিবর্তন ইভেন্টের প্রস্থের সম্পত্তি সরিয়ে দেওয়ার সাথে জড়িত তবে এটি সম্ভবত এটি স্থির করে দিয়েছে। ধন্যবাদ +1

— টোফার

আমার প্রথম দুটি ট্যাবে 3 টি ট্যাব এবং ডেটাবেবল রয়েছে, দ্বিতীয় ট্যাবে টেবিলটি পুরো প্রস্থ নয়। এই আমার সমস্যা স্থির। ধন্যবাদ

— মাইক ভলমার

Answer 4

ঠিক আছে, আমি সেই প্লাগইনটির সাথে পরিচিত নই, তবে আপনি ডেটেবল যোগ করার পরে স্টাইলটি পুনরায় সেট করতে পারবেন? কিছুটা এইরকম

$("#querydatatablesets").css("width","100%")

.ডাটা টেবিল কল পরে?

Comments

আমি এটিও সেরা সমাধান হিসাবে পেয়েছি, কারণ আমার ক্ষেত্রে, কলামগুলির কোনওটি

— mydoghasworms

এটি আমার জন্য কাজ করা সমাধান। এটি oTable.fnAd ਵਿਵਸਥਾ ColumnSizing () এর তুলনায় ডেটা টেবিলের CSS এর উপর আরও ভাল নিয়ন্ত্রণ দেয়; সমাধান আগে উল্লিখিত।

— বিজয় রুমাও

Answer 5

ডেটাটেবলের কলাম প্রস্থে আমার অসংখ্য সমস্যা হয়েছে। আমার জন্য ম্যাজিক ফিক্সটি লাইনটি সহ ছিল

table-layout: fixed;

এই সিএসএস টেবিলের সামগ্রিক CSS এর সাথে যায়। উদাহরণস্বরূপ, আপনি যদি নিম্নলিখিতগুলির মতো ডেটাবেবলগুলি ঘোষণা করে থাকেন:

LoadTable = $('#LoadTable').dataTable.....

তারপরে ম্যাজিক সিএসএস লাইনটি লোডটেবল ক্লাসে যাবে

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

Comments

এটি সাহায্য করে, তবে এখন আমার কলামগুলি সমস্ত অদ্ভুত আকারের। আমি আশা করতাম যে সর্বাধিক ডেটা সহ কলামগুলি বৃহত্তম শতাংশের প্রস্থ গ্রহণ করবে।

— সিজেবার্থ

Answer 6

টোকেনম্যাকগুইস সলিউশনটি সর্বোত্তমভাবে কাজ করে কারণ এটি জিকিউটাটাবেবলের একটি বাগের ফল। আপনি যদি $ ('# সামিটবে') ব্যবহার করেন তবে কী হয় তা হয় data এখানে একটি দ্রুত ঠিক করা আছে:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Answer 7

আপনার সিএসএস ক্লাসটি আপনার পৃষ্ঠায় যুক্ত করুন, এটি সমস্যার সমাধান করবে:

#<your_table_id> {
    width: inherit !important;
}

Comments

আমার একটি পৃথক সমস্যা ছিল আমি গত ৩০ মিনিট ধরে লড়াই করে যাচ্ছি - কোডের এই লাইনটি এটি ঠিক করে দিয়েছে - তাই আমি কেবল এই এলোমেলো মন্তব্যের জন্য ধন্যবাদ বলতে চাই।

— ব্যবহারকারী 1274820

ঠিক এই কারণেই আমি অতিরিক্ত উত্তর দিই

— বাহাদির তাসਦੇমির

Answer 8

sWidthপ্রতিটি কলামের জন্য স্পষ্টরূপে bAutoWidth: falseএবং dataTableপ্রারম্ভিক প্রস্থে প্রস্থগুলি সেট করা আমার (অনুরূপ) সমস্যার সমাধান করেছে। উপচে পড়া স্ট্যাক পছন্দ।

Answer 9

আপনাকে স্থির ক্ষেত্র ছাড়াই কমপক্ষে একটি ক্ষেত্র ছাড়তে হবে, উদাহরণস্বরূপ:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

আপনি সমস্ত পরিবর্তন করতে পারেন, তবে কেবল একটিকে নাল হিসাবে ছেড়ে যান, যাতে এটি প্রসারিত করতে পারে। আপনি যদি সমস্তের উপর প্রস্থ রেখে দেন তবে এটি কার্যকর হবে না। আশা করি আমি আজ কাউকে সাহায্য করেছি!

Comments

এটি ছিল আমার জন্য, আমি সমস্ত কলাম 1px রাখতে সেট করেছিলাম। এটিকে বাইরে রেখে ম্যাজিকালি কাজ করে। ধন্যবাদ!

— দৈত্যচোড়মনকি

Answer 10

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

পুরো টেবিলের প্রস্থ সামঞ্জস্য করতে এটি কাজ করেছে। ধন্যবাদ @ পিটার ড্রিনান!

Comments

আমি এর প্যারেন্ট পাত্রে সঠিকভাবে পূরণ করার জন্য টেবিলটি পেতে পারি না। টেবিলের সিএসএস এবং এর মোড়কের প্রস্থে সামঞ্জস্য করার চেষ্টা করা হয়েছে: 100%; কোন লক্ষণীয় পার্থক্য ছাড়া। একবার আমি উপরে বর্ণিত পদ্ধতিটি চেষ্টা করে দেখলাম এটি আশ্চর্য কাজ করেছে, তবে আমি মোড়কের দিকে ইশারা করছি না, তার পরিবর্তে আমাকে টেবিলের দিকে ইঙ্গিত করতে হবে এটি নিজেই। তবে বড় ধন্যবাদ নীলানি !!

— লজিক 1

Answer 11

ডেটাটেবল 10.1 হিসাবে, এটি সরাসরি এগিয়ে। এইচটিএমএলটিতে কেবল আপনার টেবিলের প্রস্থের বৈশিষ্ট্য রেখে দিন। অর্থাত্ প্রস্থ = "100%", এটি ডিটি দ্বারা সেট করা সমস্ত সিএসএস শৈলী ওভাররাইড করবে।

এটি দেখুন http://www.datatables.net/example/basic_init/flexible_width.html

Answer 12

এখানকার কোনও সমাধানই আমার পক্ষে কাজ করেনি। এমনকি ডেটাটেবল হোমপেজে উদাহরণ থাকা উদাহরণটি শো অপশনে ডেটাটেবলের সূচনাতে কাজ করে না।

আমি সমস্যার সমাধান খুঁজে পেয়েছি। কৌশলটি হ'ল ট্যাবগুলির জন্য অ্যাক্টিভেট বিকল্পটি ব্যবহার করা এবং দৃশ্যমান টেবিলটিতে fnAdjustColumnSizing () কল করা :

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

Answer 13

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

Answer 14

আপনি কি প্রস্তুত ইভেন্টে এটি করছেন?

$ (ডকুমেন্ট) .ডিডি (ফাংশন () {...});

সাইজিং সম্ভবত দস্তাবেজ পুরোপুরি লোড হওয়ার উপর নির্ভরশীল হতে চলেছে।

Comments

উপরের কোডটি দেখুন - এটি ডিভ কনটেইনার # ট্যাব-ডেটাসেটের এজ্যাক্স লোড থেকে কলব্যাকে ঘটছে। সারণি # ক্যোয়ারিটেবল ডেটাসেটগুলি / সিজি-বিন / ক্রিডিট্যাসেটস সরবরাহ করেছেন

— জন ম্যাক

আমি বুঝতে পেরেছি, আমি ঘটনার সময় সম্পর্কে নিশ্চিত নই। প্লাগইন উত্সের দিকে তাকানোর সময় মনে হয়েছিল যে এটি কেবলমাত্র 0 পিক্স প্রস্থকে সেট করতে পারে যখন এটি সেট টেবিলের অফসেটউইথ সঠিক টেবিলটি নির্ধারণ করতে পারে না এবং আমি বুঝতে পারি যে এটি খুব তাড়াতাড়ি চলার সাথে সম্পর্কিত।

— মুফাকা

হুঁ। আমি ধরে নিয়েছি যে আজাক্স লোড থেকে কলব্যাকটি টেবিল # ক্যুরিবেলড্যাটাসেটগুলি লোড হওয়ার পরে ডাকা হবে। আপনি কি মনে করেন যে এটি নাও হতে পারে?

— জন ম্যাক

বিটিডব্লিউটি কখন এটি চালায় সে সম্পর্কে আপনার প্রশ্নের জবাব দিতে, এটি কোনও বোতামে ক্লিক করা ব্যবহারকারীর প্রতিক্রিয়া

— জন ম্যাক

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

— মুফাকা

Answer 15

নির্দিষ্ট হেডারের প্লাগইনটি ব্যবহার করে যে কারও জন্য সারণী / ঘরের প্রস্থ সামঞ্জস্য করতে সমস্যা হচ্ছে:

ডেটাবেবলগুলি কলাম প্রস্থের পরামিতিগুলির জন্য অ্যাড ট্যাগগুলিতে নির্ভর করে। এটি কারণ টেবিলের বেশিরভাগ অভ্যন্তরীণ এইচটিএমএল স্বয়ংক্রিয়ভাবে উত্পন্ন হওয়ার কারণে এটির একমাত্র প্রকৃত এইচটিএমএল।

যাইহোক, যা ঘটে তা হ'ল আপনার কয়েকটি সেল থেড কোষের অভ্যন্তরের প্রস্থের চেয়ে বড় হতে পারে।

অর্থ্যাৎ যদি আপনার টেবিলটিতে প্রচুর কলাম (প্রশস্ত টেবিল) থাকে এবং আপনার সারিগুলিতে প্রচুর ডেটা থাকে, তারপরে "sWidth" কল করুন: টিডি সেল আকার পরিবর্তন করতে সঠিকভাবে কাজ করবে না কারণ শিশু সারিগুলি স্বয়ংক্রিয়ভাবে ওভারফ্লো এর উপর ভিত্তি করে টিডি'র পুনরায় আকার দিচ্ছে টেবিলটি আরম্ভ করার পরে এবং তার আরম্ভিক প্যারামগুলি পাস করার পরে এটি ঘটে ।

মূল থ্যাড "sWidth": প্যারামিটারগুলি ওভাররাইড হয়ে যায় (সঙ্কুচিত) কারণ ডেট্যাটেবলগুলি মনে করে যে আপনার টেবিলটির এখনও এর ডিফল্ট প্রস্থ% 100 রয়েছে - এটি স্বীকৃতি দেয় না যে কয়েকটি ঘর উপচে পড়েছে।

এটি ঠিক করার জন্য আমি ওভারফ্লো প্রস্থটি বের করেছিলাম এবং টেবিলটি আরম্ভ করার পরে সেই অনুযায়ী সারণিটির আকার পরিবর্তন করে এর জন্য জবাবদিহি করেছি - যখন আমরা এটিতে থাকি তখন আমরা একই সময়ে আমাদের স্থির শিরোনামটি চালু করতে পারি:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

Answer 16

আপনার এজাক্স কলটির "সাফল্য" এর মধ্যে আপনার ফিক্সহেডারের তৈরি করুন, আপনার শিরোনাম এবং সারিগুলিতে কোনও প্রান্তিককরণ সমস্যা হবে না।

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

Answer 17

আশা করি এটি এমন কাউকে সহায়তা করে যা এখনও লড়াই করে চলেছে।

আপনার টেবিলটি কোনও পাত্রে রাখবেন না। টেবিলটি রেন্ডার হওয়ার পরে টেবিলের মোড়কে আপনার ধারক করুন। আমি জানি যে টেবিলের সাথে আপনার অন্য কিছু থাকতে পারে এমন স্থানে এটি অবৈধ হতে পারে তবে আপনি সর্বদা সেই সামগ্রীটি ফিরে যুক্ত করতে পারেন।

আমার জন্য, আপনার যদি এমন একটি সাইডবার এবং একটি ধারক থাকে যা আসলে side সাইডবারের অফসেট this

$(YourTableName+'_wrapper').addClass('mycontainer');

(আমি একটি প্যানেল প্যানেল-ডিফল্ট যুক্ত করেছি)
এবং আপনার ক্লাস:

.mycontainer{background-color:white;padding:5px;}

Answer 18

এই সমস্যাটি সম্পর্কে আরও একটি দরকারী লিঙ্ক পান এবং এটি আমার সমস্যার সমাধান করে।

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

ডেটাবেবলগুলি প্রস্থের টেবিলটি জোর করে

Answer 19

আমি টেবিলের চারপাশে একটি ডিভ জড়িয়ে থাকা অবস্থায় একই ধরণের সমস্যায় পড়েছি।

অবস্থান যুক্ত করে: আমার জন্য এটি আপেক্ষিক স্থির করে।

#report_container {
 float: right;
 position: relative;
 width: 100%;
}

Answer 20

আমার একই রকম সমস্যা ছিল যেখানে টেবিলের সামগ্রীগুলি টেবিল শিরোনাম এবং পাদচরণের চেয়ে বড় ছিল। টেবিলের চারপাশে একটি ডিভ যুক্ত করা এবং এক্স-ওভারফ্লো সেট করা এই সমস্যার সমাধান করেছে বলে মনে হচ্ছে:

Answer 21

নিশ্চিত হয়ে নিন যে বিউটোউইথ এবং আও কলামগুলি যথাযথভাবে প্রবেশ করানোর আগে অন্য সমস্ত পরামিতি রয়েছে before

Answer 22

আমার অনুরূপ সমস্যা হয়েছিল এবং আমি দেখতে পেয়েছি যে কলামগুলিতে পাঠ্য ভাঙ্গা হয়নি এবং এই সিএসএস কোডটি ব্যবহার করে সমস্যার সমাধান হয়েছে

th,td{
max-width:120px !important;
word-wrap: break-word
}

Answer 23

এটি আমার কাজ করার পদ্ধতি ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Answer 24

আমি আজ একই সমস্যা পূরণ।

আমি এটিকে সমাধান করার জন্য একটি কৌশলপূর্ণ উপায় ব্যবহার করেছি।

নীচে হিসাবে আমার কোড।

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Answer 25

এই সমাধানটিও পরীক্ষা করে দেখুন। এটি আমার ডেটাটেবল কলাম প্রস্থের সমস্যাটিকে সহজেই সমাধান করেছে

JQuery DataTables 1.10.20 columns.adjust()বুটস্ট্র্যাপ টগল ট্যাব ইস্যু ঠিক করে এমন পদ্ধতিটি প্রবর্তন করে fix

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

দয়া করে ডকুমেন্টেশনটি উল্লেখ করুন: স্ক্রোলিং এবং বুটস্ট্র্যাপ ট্যাবগুলি

Answer 26

এটি কাজ করে।

#report_container {
   float: right;
   position: relative;
   width: 100%;
}