Jquery Datatable का उपयोग करके केवल मौजूदा पृष्ठ को कैसे सॉर्ट करें




sorting jquery-plugins (2)

मैं कई प्रोजेक्ट्स के लिए जेक्व्री डेटाटेबल का उपयोग कर रहा हूं और यह सभी परिदृश्यों के लिए पूरी तरह से काम कर रहा है।

मेरे वर्तमान प्रोजेक्ट के लिए मुझे केवल मौजूदा पृष्ठ के लिए सॉर्ट करना आवश्यक है, लेकिन डिफ़ॉल्ट डाटालेट द्वारा पूरे डेटा को सॉर्ट किया जाएगा और संपूर्ण टेबल को पुन: तैयार करना होगा

मुझे यकीन था कि यह सुविधा सक्षम करने के लिए कुछ सरल कॉन्फ़िगरेशन होगा लेकिन इन फलक के अलावा इन लाइनों को छोड़कर कोई भी नहीं मिला

var table = $('#example').DataTable();

// Sort by column 1 and then re-draw
table
    .order( [[ 1, 'asc' ]] )
    .draw( false ); 

मैंने इसे करने की कोशिश की, लेकिन ऐसा कोई प्रभाव नहीं लगता है। आपके कोड को साझा करने से पहले किसी ने भी इस सफलतापूर्वक लागू किया है।


पूछने से पहले केवल मौजूदा पृष्ठ कैसे सॉर्ट करें, हमें निम्न प्रश्नों का उत्तर देना चाहिए:

  • हम ऐसा सॉर्टिंग क्यों करना चाहते हैं?
  • हमें यह करना चाहिए?
  • क्या इसका कोई अर्थ है?
  • ऐसे निर्णय के निहितार्थ क्या हैं?

जब हम किसी क्वेरी को निष्पादित करना चाहते हैं और परिणाम सूची प्रदर्शित करते हैं तो हम इसके साथ काम कर रहे हैं:

  • खोज मापदंड
  • सॉर्टिंग मापदंड
  • पृष्ठ पर अंक लगाना

ये तीन तत्व दृढ़ता से संबंधित हैं और वे स्पष्ट रूप से परिभाषित करते हैं कि स्क्रीन पर उपयोगकर्ता क्या देखता है।
हम निम्नलिखित विवरण के लिए हो सकते हैं:

अभिनेताओं की एक सूची है इसे नाम से सॉर्ट किया गया है और पृष्ठों में विभाजित किया गया है (प्रति पेज 50 आइटम) और हम तीसरे पेज पर हैं

जब हमारे पास ऐसे नियम हैं तो इस सूची में उपयोगकर्ता की अच्छी स्थिति है। वह पृष्ठ के निचले भाग में शीर्ष पर माइकल केन और शॉन कॉनरी को देखता है जब वह रॉबर्ट डुवाल को ढूंढना चाहता है तो वह जानता है कि उसे कुछ पन्नों को आगे जाना चाहिए। और जब वह इन कलाकारों को उम्र के आधार पर देखना चाहता है तो वे केवल सूची को पुनः आरंभ करते हैं और पहले पेज पर लौटते हैं।

लेकिन अगर हम केवल मौजूदा पृष्ठ के लिए अतिरिक्त सॉर्टिंग प्रदान करते हैं? इससे उपरोक्त सिस्टम के एकीकरण को परेशान होगा अगर हम उपयोगकर्ता को कहते हैं तो यह कैसे ध्वनि करेगा:

अब आप उम्र के आधार पर कलाकारों द्वारा सॉर्ट किए गए नामों के तीसरे पृष्ठ पर विचार कर रहे हैं (पेज)।

केवल मौजूदा पृष्ठ का सहारा लेकर यह उपयोगकर्ता क्या हासिल कर सकता है? 'सी' के साथ शुरू होने वाले नाम वाले अभिनेताओं की उम्र के पदानुक्रम? पृष्ठ के शीर्ष पर इस पृष्ठ के सबसे पुराने अभिनेता होंगे। लेकिन उपयोगकर्ता यह नहीं जानता कि यह सूची में सबसे पुराना अभिनेता है। और यदि नहीं तो वह किस पृष्ठ पर पुराने को ढूंढना चाहिए? इस तरह का सहारा बेकार है और यह प्रारंभिक छँटाई को ओवरराइड करता है (जो कुछ मान था)।

इस तरह का सहारा भी उपयोगकर्ता को गंभीर भ्रम की स्थिति में ले सकता है। वह मूल छँटाई और पेज सॉर्टिंग के बारे में अपना उन्मुखीकरण खो सकता है।

निष्कर्ष:

एकल पृष्ठ के लिए सॉर्टिंग प्रदान करने में मुझे कोई समझ नहीं है I मुझे यह हानिकारक लगता है तो आपको इसका उपयोग केवल तभी करना चाहिए, अगर आपके पास इसके लिए मजबूत तर्क हैं


अपडेट 1

हालांकि मैं rtruszk से सहमत हूं, मुझे अभी भी लगता है कि यदि कोई समाधान नहीं है 1) आपका ग्राहक UX परिवर्तनों पर चर्चा करने के लिए तैयार नहीं है I

कार्यशील उदाहरण: http://jsfiddle.net/ebRXw/63/

मैं DataTable से वर्तमान दृश्यमान पंक्तियों को फ़िल्टर करने के बाद आपके द्वारा पूरा किया गया था। मैंने डेटाटेबल के भीतर एक समाधान खोजने के लिए अपनी पूरी कोशिश की और एक भी हो सकता है, लेकिन अंत में मैंने jQuery और एक हैश तालिका का उपयोग वर्तमान में दिखाई देने वाली पंक्तियों को पहचानने और फ़िल्टर करने के लिए किया।

मुझे यकीन है कि यह और अनुकूलित किया जा सकता है उम्मीद है, यह आपको सही दिशा में आगे बढ़ने में मदद करता है।

$(document).ready(function () {

    var table = $('#example').DataTable({
        "columnDefs": [{
            "targets": [0],
                "visible": false,
                "searchable": true
        }]
    });

    // Show page 0
    table.page(0).draw(false);
    // Sort by column 1 (Name)
    table.order([1, 'asc']).draw(false);

    $("#ReloadTable").click(function () {
        // Clear the current filter
        oTable = $('#example').dataTable();
        oTable.fnFilter('', 0);
        oTable.fnFilter('');

        // Reset all "visible" values in the first cell
        var table = $('#example').DataTable();
        table.rows().indexes().each(function (idx) {
            var d = table.row(idx).data();
            table.row(idx).data()[0] = 0;
            d.counter++;
            table.row(idx).data(d);
        });
    });

    $("#FilterCurrentPage").click(function () {
        // Create a hash of the index of currently visible rows
        var h = new Object();
        var x = $('.odd,.even').filter(function () {
            var idx = $(this)[0]._DT_RowIndex;
            h[idx] = idx;
            return this.style.display == ''
        });

        // update the first value based on the currently visible rows
        var table = $('#example').DataTable();
        table.rows().indexes().each(function (idx) {
            var d = table.row(idx).data();
            if (h.hasOwnProperty(idx)) {
                table.row(idx).data()[0] = 1;
            }
            d.counter++;
            table.row(idx).data(d);
        });

        // filter rows with a value of 1 in the first cell
        oTable = $('#example').dataTable();
        oTable.fnFilter(1, 0);
    });
});

0 अपडेट करें

मुझे अभी तक एक वैकल्पिक हल नहीं मिला है, लेकिन मुझे यकीन है कि एक मौजूद है। नीचे दिए गए कोड आपके डेटासेट में वर्तमान दृश्यमान पंक्तियों का चयन करेंगे और वापस करेगा।

var x = $('.odd,.even').filter(function () {
    $(this).addClass('selected'); // Select the visible rows
    return this.style.display == '' 
});

डेटाटाइटल रखरखाव से :

क्या डाटाटबल को बताने का एक आसान तरीका है कि मैं केवल मौजूदा पेजिंग को सॉर्ट और रेडल करना चाहता हूं?

डाटा टैब्स में 1.9- नहीं, ऐसा करने का कोई तरीका नहीं है, लेकिन 1.10 में आप table.order (...) का उपयोग कर सकते हैं। ड्रा (गलत); पेजिंग को संरक्षित करने के लिए 1.10 प्री बीटा जीआईटी में उपलब्ध है अगर आप इसे एक बैश देना चाहते हैं :-)

एलन

डेटाटेबल के माध्यम से : तालिका का केवल मौजूदा पृष्ठांकन क्रमबद्ध करें

हालांकि, आप वर्तमान दृश्यमान पंक्तियां प्राप्त कर सकते हैं, उन्हें सॉर्ट कर सकते हैं, और उन्हें किसी तरह प्रदर्शित कर सकते हैं। फ़िल्टरिंग के बाद नीचे दिए गए कोड वर्तमान दृश्यमान पंक्तियां प्रदान करता है।

var table = $('#example').DataTable();
table.$('tr', {"filter":"applied"});

यह भी देखें:






jquery-datatables