तालिका कॉलम बहुत अधिक

6

शायद आप सीएसएस टेक्स्ट-ओवरफ्लो प्रॉपर्टी का उपयोग करने पर विचार कर सकते हैं: http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/ और उस सेल के टूलटिप के साथ संयोजन जिसमें एक लंबा टेक्स्ट है।

स्रोत

2012-11-25 04:50:32

+0

यह केवल तभी काम करता है जब ब्राउज़र CSS3 का समर्थन करता है, लेकिन मैं टूलटिप विचार पर विचार करूंगा। – Dragos

+1

@ ड्रैगोस इसका उपयोग करने के लिए आपको एक निश्चित चौड़ाई और ऊंचाई सेट करना होगा (जब तक ये प्लगइन द्वारा पहले से सेट नहीं होते हैं)। हालांकि, ऐसा करने और 'ओवरफ़्लो: छुपा;' सेटिंग उन ब्राउज़रों में काम करेगी जो 'टेक्स्ट-ओवरफ़्लो: इलिप्सिस' का समर्थन नहीं करते हैं। 'ओवरफ्लो' 'टेक्स्ट-ओवरफ्लो' जैसा काम करेगा, सिवाय इसके कि यह स्वचालित रूप से इलिप्सिस को नहीं जोड़ देगा। फिर, आप 'td' होवर पर पूरी तरह से दिखाई दे सकते हैं, या समायोजित करने के लिए किसी अन्य माध्यम से। यह शायद आपका सबसे अच्छा विकल्प है जब तक कि आप डेटा को मैन्युअल रूप से छोटा नहीं करते हैं और स्वयं को इलिप्सिस जोड़ते हैं। –

+0

यह अब तक का सबसे अच्छा समाधान है। अन्य उपयोगकर्ताओं ने टूलटिप (शायद jQuery प्लगइन क्यूटीआईपी) का उपयोग करके सुझाव दिया है और इस विचार पर विस्तारित किया है, लेकिन आपका जवाब पहले आया था, इसलिए मैं आपको बक्षीस प्रदान करूंगा। धन्यवाद! – Dragos

1

$(document).ready(function() { 
$('#example').dataTable({ 
"bAutoWidth": false 
}); 
});

बाद <td> अपनी मेज के अंदर के लिए width सेट:

enter image description here

यहाँ मेरी समस्या दिखाई दे रहा है:

यहाँ मेरी समस्या के साथ एक स्क्रीनशॉट है।

स्रोत

2012-11-19 11:04:15 Arun

+0

की स्थापना 'bAutoWidth झूठ बोलने से मेरी समस्या हल नहीं होती है। और भी, मेरे ' एस' पर एक अलग चौड़ाई निर्धारित करने से तालिका की सामग्री कॉलम हेडर के साथ सिंक हो जाती है। यह मूल रूप से तालिका को अनुपयोगी बनाता है। क्या आपके पास अन्य सुझाव हैं? – Dragos

4

मैंने तत्व की टेक्स्ट लाइनों को सीमित करने के लिए एक छोटी jQuery प्लगइन लिखी है, उम्मीद है कि इससे मदद मिल सकती है।

/** 
* Binaray search with callback 
*/ 
function bisearch(left, right, search, getter){ 
    var pos, result; 
    if (typeof getter !== "function") { 
     getter = function (x) { 
      return x; 
     }; 
    } 

    while (left <= right) { 
     pos = (left + right)/2 | 0; 
     result = getter(pos); 

     if (result < search) { 
      left = pos + 1; 
     } 
     else if (result > search) { 
      right = pos - 1; 
     } 
     else { 
      return pos; 
     } 
    } 
    return -1; 
} 

;(function($){ 
    var getLineHeight = function(el) { 
     var self = el, 
      $self = $(self), 
      content = $self.html(), 
      lineHeight; 

     if (typeof $self.attr("style") !== "undefined") { 
      orgStyleAttr = $self.attr("style");    
     } 

     $self.html("&nbsp;").css("min-height", "0px"); 
     lineHeight = $self.height(); 

     $self.html(content); 

     if (typeof orgStyleAttr !== "undefined") { 
      $self.attr("style", orgStyleAttr); 
     } else { 
      $self.removeAttr("style"); 
     } 
     return lineHeight; 
    } 
    $.fn.limitLines = function(maxLines){ 
     $(this).each(function(){ 
      var self = this, 
       $self = $(self), 
       content = $self.html(), 
       height = $self.height(), 
       lineHeight = getLineHeight($self), 
       maxHeight = lineHeight * maxLines; 

      if (Math.floor(height/lineHeight) <= maxLines) 
       return; 

      // this search will stop when the text meet the line count, 
      // but the last line will be of any length 
      var middleOfLastLine = bisearch(0, content.length, maxLines, function (n){ 
       $self.html(content.substring(0, n)); 
       return Math.floor($self.height()/lineHeight); 
      }); 

      // search for position from current to current plus one more line, 
      // until we find the excact position(p) to stop, 
      // where if one more letter was added, 
      // there will be a new line 
      var endOfLastLine = bisearch(middleOfLastLine, content.length, maxLines + .5, function (n){ 
       $self.html(content.substring(0, n - 3) + '...'); 
       var before = Math.floor($self.height()/lineHeight); 

       $self.html(content.substring(0, n - 2) + '...'); 
       var after = Math.floor($self.height()/lineHeight); 

       return (before + after)/2; 
      }); 
      $self.html(content.substring(0, endOfLastLine -3) + '...'); 
     }); 
    }; 
})(jQuery);

स्रोत

2012-11-26 05:45:02

+0

मैंने बाइनरी खोज के साथ कोड को फिर से लिखा है, यह संस्करण तेजी से काम करता है। एक नया getLineHeight() फ़ंक्शन भी जोड़ा गया है। –

5

डेटाटेबल रेंडर पूरा होने के बाद आप प्रत्येक टीडी के लिए पाठ की लंबाई की जांच कर सकते हैं। यदि पाठ की लंबाई आपको परिभाषित सीमा से अधिक है, तो आप उस तालिका कक्ष i.e td के लिए एक बड़ी चौड़ाई निर्धारित कर सकते हैं। इस तरह से आप किसी भी सेल कि अपने वांछित ऊंचाई भले ही आप जहां मेज

यहाँ में यह है पता नहीं है से अधिक है को चौड़ा कर सकते हैं कोड

$(document).ready(function() { 
    $('#example').dataTable({ 
    "sScrollX":"100%", 
    "fnInitComplete": function(oSettings, json) { 

     $('#example tr').each(function(i){ 
      $('td', this).each(function(j){ 
       // get length of text 
       var l = $(this).text().length; 
       // set larger width if text length is greater than 300 characters 
       if(l > 300){ 
        $(this).width(400); 
       } 
      }); 
     }); 
    } 
    }); 
});

See this code demo here

तुम भी सेल का उपयोग कर सकते है ऊंचाई var l = $ (this) .height(); लेकिन मुझे नहीं लगता कि यह आपको सही परिणाम प्रदान करेगा, क्योंकि एक ही पंक्ति में अन्य कोशिकाओं की चौड़ाई को समायोजित करने से पहले जिनके पास बड़े ग्रंथों की समान ऊंचाई नहीं हो सकती है, इसलिए उनकी चौड़ाई संपत्ति भी इसका उपयोग कर बदली जाएगी, जो कि सही नहीं है अपनी स्थिति, मैं अनुमान लगा

हालांकि मुझे लगता है कि एक बेहतर विचार को सीमित करने के पाठ ट्रिम करने के लिए हो सकता है, एक "अधिक" लिंक जोड़ सकते हैं और qTip

स्रोत

2012-11-26 12:08:05

+0

आपके द्वारा सुझाए गए समाधान काम नहीं कर रहे हैं। टीडी की चौड़ाई को बदलकर मैं पूरी तालिका को बर्बाद कर देता हूं: हेडर अब इसकी सामग्री से मेल नहीं खाता है। यह आपके डेमो में भी दिखाई देता है। मैं आपके अन्य सुझाव पर विचार करूंगा और qTip का उपयोग कर सकता हूं। – Dragos

+0

मैंने अभी एक सेल के साथ एक उदाहरण बनाया है, आप हमेशा अपनी चौड़ाई के साथ इंडेक्स "जे" पर हेडर और पाद लेख सेल तत्व अपडेट कर सकते हैं। लेकिन मुझे लगता है कि इसके लिए इतना जटिलता नहीं आती है, ट्रिमिंग और टूलटिप समाधान –

3

जैसे कुछ प्लगइन का उपयोग कर पूर्ण पाठ को दिखाने आप aoColumnDefs जो की अनुमति देता है उपयोग करने की आवश्यकता आप शीर्षक या संख्या से विशिष्ट कॉलम को लक्षित करने के लिए, और प्लग-इन के मूल sWidth संपत्ति का उपयोग करके वांछित कॉलम की चौड़ाई निर्धारित करें:

$(document).ready(function() { 
    var data = $('#example').dataTable({ 
    "sScrollX":"100%", 
    "aoColumnDefs": [ 
    { "sWidth": "1500px", "aTargets": [5] } // this will target the 6th column (the first being 0) 
] 
}); 

});

a working example

documentation

आप पहले से नहीं जानते हैं जो कॉलम आप हमेशा प्रत्येक कोशिका में स्ट्रिंग के length प्राप्त कर सकते हैं लक्षित करते हैं, और उसके अनुसार कार्य। यानी, यदि लंबाई एक निश्चित संख्या से अधिक है।वर्णों के बाद, आप कॉलम संख्या को सरणी में जोड़ते हैं, बाद में aTargets

स्रोत

2012-11-26 21:44:46 Matanya

1

करने के लिए सबसे आसान काम nobr HTML टैग के साथ तालिका में जाता है जो कुछ भी लपेटता है। यह सबसे सुरुचिपूर्ण समाधान नहीं हो सकता है, लेकिन यह काम करेगा, और आप अपनी सेल चौड़ाई को सीमित करने और अपने ओवरफ्लो सेट करने के लिए सीएसएस का उपयोग कर सकते हैं। मैंने आपका उदाहरण here क्लोन किया।

डेटाटेबल्स दस्तावेज़ों के माध्यम से पढ़ना, मैन्युअल समाधान केवल तभी काम कर सकता है जब आप किसी मौजूदा DOM तत्व पर datatable() पर कॉल कर रहे हों। यदि आप किसी सरणी से या AJAX स्रोत से डेटा लोड करते समय ऐसा करना चाहते हैं, तो आपको jQuery का उपयोग करके nobr टैग के साथ प्रत्येक तालिका कक्ष में डेटा को प्रोग्रामेटिक रूप से लपेटना पड़ सकता है। इसके बारे में अच्छी बात यह है कि आप जो भी तय करने का फैसला करते हैं उस पर अधिक नियंत्रण हो सकता है।

DataTables एपीआई pre-init या post-init API कॉल प्रदान करता है - आप तालिका में सभी TDs के माध्यम से है कि दोहराता एक jQuery समारोह के लिए एक कॉलबैक टाई कर सकते हैं और nobr टैग में सामग्री गिर्द घूमती है।

मुझे उम्मीद है कि यह समझ में आया है। शुभकामनाएँ!

स्रोत

2012-11-27 18:01:08

+0

के लिए जाएं यह समझ में आता है कि आप क्या कह रहे हैं। इसे 'व्हाइट-स्पेस: अब्रैप' के साथ पूरा किया जा सकता है। यहां समस्या यह है कि मुझे एक बहुत लंबा कॉलम मिलता है, इस प्रकार किसी अन्य समस्या को बदल देता है। यदि मैं एक 'अतिप्रवाह: ऑटो' जोड़ता हूं, जैसा कि आपने सुझाया है चौड़ाई को नियंत्रित करना, मुझे स्क्रॉल करने योग्य कोशिकाओं के साथ स्क्रोल करने योग्य तालिका मिल जाएगी - स्क्रॉलप्शन: डी। यह थोड़ा अजीब लगता है। क्या आपके पास कोई अन्य सुझाव है कि मुझे आगे स्क्रॉल बनाने से कैसे बचना चाहिए? – Dragos

1

आप यह स्वचालित रूप से बड़े डेटा

<style> 
.box{width:250;height:75;overflow:auto} 
</style> 

<div class="box" >your data here will only have a scrollbar if it overflows your predefined height width parameters</div>

स्रोत

2012-11-28 01:03:21 technosaurus

1

पर प्रकट स्क्रॉलबार प्रत्येक स्तंभ के लिए अपनी खुद की चौड़ाई निर्दिष्ट कर सकते हैं।

$(document).ready(function() { 
    $('#example').dataTable({ 
    "sScrollX":"100%", 
    "aoColumns": [ 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" }, 
     { "sWidth": "30%" } 
    ] 
    }); 
});

स्रोत

2012-11-28 11:58:44

+0

यह कुछ भी नहीं बदलता है। ऐसा शायद इसलिए है क्योंकि सभी swidths का योग 100% से अधिक है और यही कारण है कि विनिर्देश को अनदेखा किया जाता है। – Dragos

+0

यह परिवर्तन। Http://live.datatables.net/ufewab/edit#preview देखें –

2

के रूप में आप चाहते हैं, तो मैं 70% इस्तेमाल किया लेकिन आप यह भी 400px

http://live.datatables.net/ajemid/4/edit

$(document).ready(function() { 
    $('#example').dataTable({ 
    "sScrollX":"100%", 
    "aoColumnDefs": [ 
     { "sWidth": "70%", "aTargets": [ 0 ] } 
    ] 
    }); 
});

"aTargets" की तरह पिक्सल का उपयोग कर सकते तुम एक स्तंभ विस्तार कर सकते हैं: [0] के लिए है पहला कॉलम, दूसरा के लिए 1, आदि ..

पाठ को सीमित करने के लिए, आप सीएसएस गुणों को अधिकतम ऊंचाई जैसे 200px लागू कर सकते हैं; और अतिप्रवाह: छुपा; आप लंबे सेल पर एक अच्छा लुप्तप्राय-सफेद प्रभाव देने के लिए सेल के निचले हिस्से में एक लंबवत ढाल (सफेद से पारदर्शी) भी लागू कर सकते हैं।

स्रोत

2012-11-28 17:15:40 FrancescoMM

0

अपने समाधान %

परिवर्तन what_ever करने के लिए odd gradeA से इस td class का नाम है और निश्चित रूप से आप इसके साथ खेल सकते हैं के इस

width: 80%;

जोड़ने आप कितना चाहते हैं।

या बदलने के इस

<tr class="odd gradeA"> //of the long text

<tr style="width: 80%">

और अन्य सभी td रों शुरू हो जाएगा, ताकि आप भी अन्य td रों कितना यू % द्वारा पसंद करने के लिए एक ही बात कर सकते हैं करने के लिए उम्मीद है कि यह

स्रोत

2012-11-29 09:07:26

0

मेरी दृष्टि में आपको बाहर रखी गई सीमा को सीमित करना चाहिए सर्वर की तरफ से आपकी स्क्रिप्ट ओम, यह कुछ बैंडविड्थ भी बचाएगी, और कुछ बैंडविड्थ भी बचाएगी, और पृष्ठ लोड

स्रोत

2012-11-29 11:58:35

0

@ बुरहान का उत्तर सुधारना: आप सीधे सेल में प्रदर्शित वर्णों को सीमित कर सकते हैं और शीर्षक में जोड़ सकते हैं सेल की तो यह ......... प्रभाव का एक टूलटिप तरह (== qTip ??) जो कुछ भी आप के लिए आरामदायक है

$(document).ready(function() { 
    $('#example').dataTable({ 
    "sScrollX":"100%", 
    "fnInitComplete": function(oSettings, json) { 

     $('#example tr').each(function(i){ 
      $('td', this).each(function(j){ 
       // get length of text 
       var l = $(this).text().length; 
       var limit = 200; 
       // set larger width if text length is greater than 300 characters 
       if(l > limit){ 
        $(this).attr('title',$(this).text()) 
          .text($(this).text().substr(0,limit)); 
       } 
      }); 
     }); 
    } 
    }); 
});

परिवर्तन सीमा चर पैदा करेगा

स्रोत

2012-11-29 12:40:33

तालिका कॉलम बहुत अधिक

उत्तर

संबंधित मुद्दे