복붙노트

[JQUERY] jQuery를 테이블 정렬

JQUERY

jQuery를 테이블 정렬

해결법

  1. 1.당신은 모든 종과 경적을 피하려면 내가 sortElements는 플러그인이 간단한을 제안 할 수 있습니다. 용법:

    당신은 모든 종과 경적을 피하려면 내가 sortElements는 플러그인이 간단한을 제안 할 수 있습니다. 용법:

    var table = $('table');

$('.sortable th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

    그리고이 데모. (종류에 "도시"와 "시설"열 헤더를 클릭)

  2. 2.나는이 가로 질러 와서 내 2 센트에 던질 거라고 생각했다. 내림차순 정렬 다시 정렬 오름차순으로 열 헤더를 클릭합니다.

    나는이 가로 질러 와서 내 2 센트에 던질 거라고 생각했다. 내림차순 정렬 다시 정렬 오름차순으로 열 헤더를 클릭합니다.

    $ ( '일'). () {(기능을 클릭 VAR 테이블 = $ (이) .parents ( '테이블'). EQ (0) VAR 행 = table.find.. ( 'TR : 하였다 (0)') toArray () 정렬 (비교 자 ($ (이)있는 .index ())) this.asc =! this.asc 만약 (! this.asc) {행 = rows.reverse ()} 경우 (나는 <표> <일> 국가 <일> 날짜 <일> 크기 프랑스 2001-01-01 25 스페인 2005-05-05 레바논 2002년 2월 2일 -17 아르헨티나 2005년 4월 4일 100 USA -6

  3. 3.지금까지 제가 사용했던 쉬운 일입니다 http://datatables.net/

    지금까지 제가 사용했던 쉬운 일입니다 http://datatables.net/

    당신은 (테이블을 구축하고 그것을 다시 포맷 DataTables셔서, IE)를 DOM 교체 경로를 이동하는 경우 놀랍게도 간단 ... 단지 와 와 테이블의 서식을 확인 후 확인하거나 작동하지 않습니다. 즉, 단지 잡았다 관하여이다.

    모든 코드 정말 좋은 조각 등 AJAX,로에 대한 지원도 있습니다, 그것은 모든 전원을 켜 아주 쉽게이기도합니다. 당신은 당신이 그래도하여 무엇을 놀라게 할 것입니다. 나는 단지 하나 개의 필드를 분류 한 다음 기능 중 일부는 내가 뭘하는지 정말 관련 있다고 깨달았다 "맨발"DataTable을 시작했다. 클라이언트는 새로운 기능을 좋아합니다.

    전체 ThemeRoller 지원 DataTables에 보너스 포인트 ....

    또한 tablesorter에와 확인 행운을 했어,하지만 확실히 문서화하지, 거의 쉬운 일이 아닙니다, 단지 확인 기능을 가지고 있습니다.

  4. 4.우리는 단지이 매끄러운 도구를 사용하기 시작 : https://plugins.jquery.com/tablesorter/

    우리는 단지이 매끄러운 도구를 사용하기 시작 : https://plugins.jquery.com/tablesorter/

    에서의 사용에 대한 비디오가있다 : http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

        $('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

    간단한 테이블로

    <table id="tableRoster">
        <thead> 
                  <tr>
                    <th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Recently Accessed</th>
                    <th>&nbsp;</th>
                  </tr>
        </thead>

  5. 5.내 대답은 "주의"일 것이다. jQuery를 테이블 - 정렬의 많은 추가 기능 만 종류의 브라우저에 전달할 것. 많은 경우에, 당신은 테이블 데이터의 동적 집합이라는 것을 명심해야하고, 잠재적으로 데이터 라인의 엄청나게 많은 수를 포함 할 수 있습니다.

    내 대답은 "주의"일 것이다. jQuery를 테이블 - 정렬의 많은 추가 기능 만 종류의 브라우저에 전달할 것. 많은 경우에, 당신은 테이블 데이터의 동적 집합이라는 것을 명심해야하고, 잠재적으로 데이터 라인의 엄청나게 많은 수를 포함 할 수 있습니다.

    당신은 당신은 단지 4 열을 가지고 있지만, 우리는 여기에 대해 이야기하고 얼마나 많은 행이 훨씬 더 중요한 것은, 당신이 언급하지 않는 것이 언급을한다.

    당신이 실제 데이터베이스 테이블은 10 만 행이 포함되어 있음을 알고, 데이터베이스에서 브라우저에 5000 선을 통과하면 내 질문은 : 테이블 정렬을 만드는 점은 무엇입니까? 적절한 종류의 작업을 수행하려면 데이터베이스에 쿼리 다시 보낼 수 있고, 데이터베이스 (실제로 종류의 데이터에 설계된 도구)를 수행 당신을 위해 정렬 할 것입니다.

    귀하의 질문에 직접 대답에,하지만 최고의 정렬 애드온 내가 건너했습니다 잉그리드입니다. 이 (당신이 그것을 전화로 "불필요한 종과 경적 ...") 내가이 부가 기능 좋아하지 않아 많은 이유가 있지만 그 중 하나는, 종류면에서 최고의 기능을의 IT는 아약스를 사용하고, 아무튼 ' t는 그것의 종류를 수행하기 전에 이미 모든 데이터를 전달했다고 가정합니다.

    나는이 대답은 당신의 요구 사항 (2 년 후반) 과도 아마임을 인식하지만, 내 분야에서 개발자가이 점을 간과 때 나는 GET 짜증을한다. 나는 그것을 다른 사람 추천을 희망 그래서.

    지금은 기분이 좋아.

  6. 6.이 테이블을 정렬의 좋은 방법입니다 :

    이 테이블을 정렬의 좋은 방법입니다 :

    $ (문서) .ready (함수 () { $ ( '일'). 각 (함수 (COL) { $ (이) .hover ( 함수 () { $ (이) .addClass ( '초점'); }, 함수 () { $ (이) .removeClass ( '초점'); } ); $ (이) .click (함수 () { {($ (이)가 ( '. ASC')를 .is는) 경우 $ (이) .removeClass ( '오름차순'); $ (이) .addClass ( 'DESC 선택된'); 있는 sortOrder = -1; } 다른 { $ (이) .addClass ( '오름차순 선택'); $ (이) .removeClass ( '내림차순'); 있는 sortOrder = 1; } $ (이) .siblings () removeClass ( '오름차순으로 선택.'); $ (이) .siblings () removeClass ( '선택 DESC.'); VAR arrData = $ ( '테이블') 찾기 ( 'TBODY> TR :이 (TD)').. (수) arrData.sort (함수 (a, b) { . VAR VAL1 = $ (A) .children ( 'TD') EQ (COL)는 .text ()를 toUpperCase ().; VAR을 val2 = $ (b) .children ( 'TD') 당량 (COL)는 .text ()를 toUpperCase ()..; 경우 ($ .isNumeric (val1과) && $ .isNumeric (을 val2)) 반환있는 sortOrder == 1? VAL1 -을 val2 :을 val2 - val1과; 그밖에 반환 (val1과 <을 val2)? -sortOrder : (VAL1>을 val2)? 있는 sortOrder : 0; }); {) .each (arrData, 기능 (인덱스 행 달러 $ ( 'TBODY') APPEND (행).; }); }); }); }); 테이블 번째 TD { 국경 : 1 픽셀의 검은 색; } 일 { 커서 : 포인터; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <표> <일> ID <일> 이름 <일> 세 1 줄리안 31 2 버트 12 3 자이 25 4 민디 32 5 데이비드 40

    바이올린은 여기에서 찾을 수 있습니다 : https://jsfiddle.net/e3s84Luw/

    설명은 여기에서 찾을 수 있습니다 : https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code

  7. 7.나는이 허용 대답을 사랑하지만, 거의 당신은 요구 사항이 정렬 방향을 나타내는 아이콘을 추가 할 필요가 HTML을 정렬하지 얻을 않습니다. 나는이 대답의 사용 예를 받아들이고 단순히 내 프로젝트에 부트 스트랩을 추가하고 다음 코드를 추가하여 해당 신속하게 해결했다 :

    나는이 허용 대답을 사랑하지만, 거의 당신은 요구 사항이 정렬 방향을 나타내는 아이콘을 추가 할 필요가 HTML을 정렬하지 얻을 않습니다. 나는이 대답의 사용 예를 받아들이고 단순히 내 프로젝트에 부트 스트랩을 추가하고 다음 코드를 추가하여 해당 신속하게 해결했다 :

    내부의 각 <일> 그래서 당신은 아이콘을 설정하는 곳이있다.

    (이것은, 역)의 setIcon;

    허용 대답의 사용에서, 라인 아래 :

    th.click (함수 () {

    에 의해이 방법의 setIcon 추가 :

    function setIcon(element, inverse) {

        var iconSpan = $(element).find('div');

        if (inverse == false) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-up');
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('icon-white icon-arrow-down');
        }
        $(element).siblings().find('div').removeClass();
    }

    여기 데모입니다. - 다음 페이지 중 하나가 작동에 데모 파이어 폭스 나 IE, 또는 비활성화 크롬의 MIME 타입 검사에서 데모를 실행해야합니다. 그것은 외부 자원으로, 허용 대답에 의해 연결의 sortElements 플러그인에 따라 달라집니다. 그냥 머리까지!

  8. 8.여기에 사용할 결정 도움이 될 수 있습니다 차트는 다음과 같습니다 http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

    여기에 사용할 결정 도움이 될 수 있습니다 차트는 다음과 같습니다 http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/

  9. 9.@Nick Grealy의 대답은 매우 중요하지만, 그것은 (그리고 아마도 다른 답변 중 하나를하지 않는다) 테이블 헤더 셀의 계정 수 ROWSPAN 특성을 고려하지 않습니다. 여기에 그를 해결 @Nick Grealy의 대답의 개선이다. 이 답변이 너무 (감사 앤드류 올 로브) 기준으로합니다.

    @Nick Grealy의 대답은 매우 중요하지만, 그것은 (그리고 아마도 다른 답변 중 하나를하지 않는다) 테이블 헤더 셀의 계정 수 ROWSPAN 특성을 고려하지 않습니다. 여기에 그를 해결 @Nick Grealy의 대답의 개선이다. 이 답변이 너무 (감사 앤드류 올 로브) 기준으로합니다.

    나는 또한 사용자 정의 하나를 사용하여 $ .isNumeric 기능을 대체 한이 오래된 jQuery를 버전과 함께 작동하도록 (감사 @zad).

    활성화하려면 <표> 태그에 클래스 = "정렬"을 추가합니다.

    $(document).ready(function() {

    $('table.sortable th').click(function(){
        var table = $(this).parents('table').eq(0);
        var column_index = get_column_index(this);
        var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
        this.asc = !this.asc;
        if (!this.asc){rows = rows.reverse()};
        for (var i = 0; i < rows.length; i++){table.append(rows[i])};
    })

});

function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index);
        return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };

function isNumber(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}

function get_column_index(element) {
    var clickedEl = $(element);
    var myCol = clickedEl.closest("th").index();
    var myRow = clickedEl.closest("tr").index();
    var rowspans = $("th[rowspan]");
    rowspans.each(function () {
        var rs = $(this);
        var rsIndex = rs.closest("tr").index();
        var rsQuantity = parseInt(rs.attr("rowspan"));
        if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
            myCol++;
        }
    });
    // alert('Row: ' + myRow + ', Column: ' + myCol);
    return myCol;
};

  10. 10.당신은, 일종의 필터 및 페이지 매김을 제공하는 jQuery 플러그인 (breedjs)를 사용할 수 있습니다 :

    당신은, 일종의 필터 및 페이지 매김을 제공하는 jQuery 플러그인 (breedjs)를 사용할 수 있습니다 :

    HTML :

    <table>
  <thead>
    <tr>
      <th sort='name'>Name</th>
      <th>Phone</th>
      <th sort='city'>City</th>
      <th>Speciality</th>
    </tr>
  </thead>
  <tbody>
    <tr b-scope="people" b-loop="person in people">
      <td b-sort="name">{{person.name}}</td>
      <td>{{person.phone}}</td>
      <td b-sort="city">{{person.city}}</td>
      <td>{{person.speciality}}</td>
    </tr>
  </tbody>
</table>

    JS :

    $(function(){
  var data = {
    people: [
      {name: 'c', phone: 123, city: 'b', speciality: 'a'},
      {name: 'b', phone: 345, city: 'a', speciality: 'c'},
      {name: 'a', phone: 234, city: 'c', speciality: 'b'},
    ]
  };
  breed.run({
    scope: 'people',
    input: data
  });
  $("th[sort]").click(function(){
    breed.sort({
      scope: 'people',
      selector: $(this).attr('sort')
    });
  });
});

    바이올린에 예를 들어 작업

  11. 11.이것은 브라우저 / S를 끊지 않고, 쉽게 구성 추가 :

    이것은 브라우저 / S를 끊지 않고, 쉽게 구성 추가 :

    var table = $('table');

$('th.sortable').click(function(){
    var table = $(this).parents('table').eq(0);
    var ths = table.find('tr:gt(0)').toArray().sort(compare($(this).index()));
    this.asc = !this.asc;
    if (!this.asc)
       ths = ths.reverse();
    for (var i = 0; i < ths.length; i++)
       table.append(ths[i]);
});

function compare(idx) {
    return function(a, b) {
       var A = tableCell(a, idx), B = tableCell(b, idx)
       return $.isNumeric(A) && $.isNumeric(B) ? 
          A - B : A.toString().localeCompare(B)
    }
}

function tableCell(tr, index){ 
    return $(tr).children('td').eq(index).text() 
}

  12. 12.제임스의 반응은 정렬 기능을 변경 뜻에 더 보편적 확인합니다. 이 방법은 번호와 같은 텍스트 알파벳과 숫자를 정렬합니다.

    제임스의 반응은 정렬 기능을 변경 뜻에 더 보편적 확인합니다. 이 방법은 번호와 같은 텍스트 알파벳과 숫자를 정렬합니다.

    if( $.text([a]) == $.text([b]) )
    return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
    return $.text([a]) > $.text([b]) ? 
       inverse ? -1 : 1
       : inverse ? 1 : -1;
}
else{
    return parseInt($.text([a])) > parseInt($.text([b])) ? 
      inverse ? -1 : 1
      : inverse ? 1 : -1;
}

  13. 13.정렬 HTML 테이블에 대한 또 다른 접근 방법. (정렬 W3.JS HTML 기준)

    정렬 HTML 테이블에 대한 또 다른 접근 방법. (정렬 W3.JS HTML 기준)

    / * 시설 명 * / $ ( '# bioTable 일 : EQ (0)') addClass ( "제어 라벨 포인터");. / * 전화 번호 * / $ ( '# bioTable 일 : EQ (1)'). addClass ( "-수 없습니다"); / *시 * / $ ( '# bioTable 일 : EQ (2)') addClass ( "제어 라벨 포인터");. / * 전문 * / $ ( '# bioTable 일 : EQ (3)'). addClass ( "-수 없습니다"); VAR 컬렉션 = [{ "FacilityName": "미니언" "전화": "999-8888" "도시": "프랑스" "전문": "유전자 예측" }, { "FacilityName": "GridION의 X5" "전화": "999-8812" "도시": "싱가포르" "전문": "DNA 조립" }, { "FacilityName": "PromethION" "전화": "929-8888" "도시": "샌프란시스코" "전문": "DNA 테스트" }, { "FacilityName": "ISEQ 100 시스템", "전화": "999-8008" "도시": "크라이스트 처치" "전문": "gDNA를-mRNA의 염기 서열" }] $ TBODY = $ ( "# bioTable") APPEND ( ' .'); 경우 (나는 '컬렉션 + [I] [ "FacilityName"] + " '컬렉션 + [I] ["전화 " ] + ' '+ 컬렉션 [I] [ "도시"] + " '+ 컬렉션 [I] ["특수 "] +" '); } .control - 라벨 : 후 { 내용 : "*"; 색상 : 빨강; } .pointer { 커서 : 포인터; } 이 아니요-허용 { 커서 :-수 없습니다; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> <스크립트 SRC = "https://www.w3schools.com/lib/w3.js"> <링크 HREF = "https://www.w3schools.com/w3css/4/w3.css"REL = "스타일"/>

    의 테이블 헤더 를 클릭 그에 따라 테이블을 정렬 : <테이블 ID = "bioTable"클래스 = "W3 테이블 모두"> <제의 onclick = "w3.sortHTML ( '# bioTable', '.item', 'TD : n 번째 자식 (1)')"> 시설 이름 <일> 전화 번호 <제의 onclick = "w3.sortHTML ( '# bioTable', '.item', 'TD : n 번째 자식 (3)')">시 <제> 전문

  14. 14.내가 닉의 답변을 사용하여 종료 (가장 인기 있지만, 허용되지 않습니다) https://stackoverflow.com/a/19947532/5271220

    내가 닉의 답변을 사용하여 종료 (가장 인기 있지만, 허용되지 않습니다) https://stackoverflow.com/a/19947532/5271220

    그리고 https://stackoverflow.com/a/16819442/5271220로 결합하지만 프로젝트에 아이콘 또는 fontawesome을 추가하지 않았다. 정렬 열 ASC의 CSS 스타일 / I 색상, 패딩, 둥근 테두리를했다 DESC.

    나는 또한 우리가 정렬되는 것을 제어 할 수 있도록 클래스보다는 어떤으로 이동하도록 수정했습니다. 이것은 또한 더 수정이 그것에 대해 할 필요가 있지만, 두 개의 테이블이있는 경우 편리 이후에 올 수 있습니다.

    몸:

     html += "<thead>\n";
    html += "<th></th>\n";
    html += "<th class=\"sort-header\">Name <span></span></i></th>\n";
    html += "<th class=\"sort-header\">Status <span></span></th>\n";
    html += "<th class=\"sort-header\">Comments <span></span></th>\n";
    html += "<th class=\"sort-header\">Location <span></span></th>\n";
    html += "<th nowrap class=\"sort-header\">Est. return <span></span></th>\n";
    html += "</thead>\n";
    html += "<tbody>\n"; ...

    ... 상기 본체의 아래

    $("body").on("click", ".sort-header", function (e) {
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc) { rows = rows.reverse() }
    for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }

    setIcon(e.target, this.asc);
});

    기능 :

    function comparer(index) {
        return function (a, b) {
            var valA = getCellValue(a, index), valB = getCellValue(b, index)
            return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
        }
    }

    function getCellValue(row, index) {
        return $(row).children('td').eq(index).text()
    }

    function setIcon(element, inverse) {

        var iconSpan = $(element).find('span');

        if (inverse == true) {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-asc');
            $(iconSpan)[0].innerHTML = " &#8593 " // arrow up
        } else {
            $(iconSpan).removeClass();
            $(iconSpan).addClass('sort-column-desc');
            $(iconSpan)[0].innerHTML = " &#8595 " // arrow down 
        }

        $(element).siblings().find('span').each(function (i, obj) {
            $(obj).removeClass();
            obj.innerHTML = "";
        });
    }

  15. 15.내 투표! jquery.sortElements.js 간단한 JQuery와 아주 간단하고 아주 쉽게, 감사 nandhp ...

    내 투표! jquery.sortElements.js 간단한 JQuery와 아주 간단하고 아주 쉽게, 감사 nandhp ...

                $('th').live('click', function(){

            var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();

                switch($(this).attr('inverse')){
                case 'false': inverse = true; break;
                case 'true:': inverse = false; break;
                default: inverse = false; break;
                }
            th.attr('inverse',inverse)

            table.find('td').filter(function(){
                return $(this).index() === thIndex;
            }).sortElements(function(a, b){
                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;
            }, function(){
                // parentNode is the element we want to move
                return this.parentNode; 
            });
            inverse = !inverse;     
            });

    나는 향상된 코드를했다 하나는 더 나은 대구! 모든 시간 목의 모든 테이블의 모든에 대한 기능 ... 그것을 봐! 데모

    16. from https://stackoverflow.com/questions/3160277/jquery-table-sort by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 주어진 앵커로 스크롤 HTML 페이지에?  (0) 2020.10.02
[JQUERY] 어떻게 사용 slideDown (또는 쇼) 테이블 행에 함수?  (0) 2020.10.02
[JQUERY] 자기 스트랩 = DISS?  (0) 2020.10.01
[JQUERY] 요소가 존재 할 때까지 얼마나 기다려야합니까?  (0) 2020.10.01
[JQUERY] jQuery로 파일 업로드 진행 바  (0) 2020.10.01
,

티스토리툴바