مسج / جافا سكريبت: تعديل جانب العميل من الناتج asp.net DataGrid لتسمح tablesorter للعمل

Question

وإخراج في DataGrid asp.net لا يتضمن THEAD وTBODY العناصر المطلوبة لtablesorter مسج للعمل.

ومنها مثلا. يبدو مثل هذا:

    <table>
        <tr>this is my header row</tr>
        <tr>content row 1</tr>
        <tr>content row 2</tr>
        <tr>content row 3</tr>
        ...
        <tr>content row n</tr>
    </table>

ووأنه يحتاج إلى تبدو مثل هذا:

    <table>
        <thead>
            <tr>this is my header row</tr>
        </thead>
        <tbody>
            <tr>content row 1</tr>
            <tr>content row 2</tr>
            <tr>content row 3</tr>
            ...
            <tr>content row n</tr>
        </tbody>
    </table>

وطرقت تصل جافا سكريبت التالية لإدراجها حيوي، ولكن الجدول لا يزال غير قابل للفرز. لقد أكدت أنني إذا يدويا إدراج THEAD وTBODY علامات مباشرة في أتش تي أم أل الإخراج، الجدول هو للفرز، ولكن عندما أحاول القيام بذلك باستخدام DOM، فإنه لا يبدو قادرا على العمل.

ما أنا في عداد المفقودين؟

    $(document).ready(function() 
        { 
            var tbl = document.getElementById('mytableid');

            // new header and body elements to be inserted
            var tblHead = document.createElement('thead');
            var tblBody = document.createElement('tbody');
            // get the first row and the remainder
            var headerRow = $(tbl).find('tr:first')
            var bodyRows  = $(tbl).find('tr:not(:first)');

            // remove the original rows
            headerRow.remove();
            bodyRows.remove();

            // add the rows to the header and body respectively
            $(tblHead).append(headerRow);
            $(tblBody).append(bodyRows);

            // add the head and body into the table
            $(tbl).append(tblHead);
            $(tbl).append(tblBody);

            // apply the tablesorter
            $(tbl).tablesorter(); 
        } 
    ); 

وتحرير: أنا في الواقع حل المشكلة قبل أن تنشر هذا السؤال، ولكنني اعتقدت أن نمضي قدما وبعد ذلك على أي حال، لأنه قد يكون من المفيد للآخرين ... انظر جوابي أدناه.

Answer 1

وعلى ما يبدو، يظهر عنصر الوهمية في الإخراج. هو خدعة لضمان أن يتم إزالته قبل أن يضيف في تلك المتولدة ... نأمل أن هذا سوف يكون من المفيد لشخص ما!

    $(document).ready(function() 
        { 
            var tbl = document.getElementById('mytableid');

            // new header and body elements to be inserted
            var tblHead = document.createElement('thead');
            var tblBody = document.createElement('tbody');
            // get the first row and the remainder
            var headerRow = $(tbl).find('tr:first')
            var bodyRows  = $(tbl).find('tr:not(:first)');

            // remove the original rows
            headerRow.remove();
            bodyRows.remove();

            // SOLUTION HERE: 
            // remove any existing thead/tbody elements
            $(tbl).find('tbody').remove();
            $(tbl).find('thead').remove();

            // add the rows to the header and body respectively
            $(tblHead).append(headerRow);
            $(tblBody).append(bodyRows);

            // add the head and body into the table
            $(tbl).append(tblHead);
            $(tbl).append(tblBody);

            // apply the tablesorter
            $(tbl).tablesorter(); 
        } 
    ); 

Answer 2

ورمز أعلاه لا يزال لا تعالج الخلايا في الرأس. لتحويلها من العبارات التي العلامات التي يمكن أن تضيف هذا:

و $('thead tr td').each(function(i) { $(this).replaceWith("<th>" + $(this).html() + "<\/th>"); });