예, 알고 싶습니다. 많은의 JS/jQuery 프로그램이 있습니다. 현재 http://www.kryogenix.org/code/browser/sorttable/sorttable.js을 사용 중입니다. 매우 쉽습니다 : JS 파일 만 테이블에 몇 가지 클래스 속성을 추가하면됩니다. 특히, 실제로 JS를 사용하여이를 사용할 필요는 없으며 사용자 정의 JS를 작성하여 사용자 정의 정렬 키를 추가하여이를 확장 할 수 있습니다. 그 두 가지 이유 때문에 나는 그것을 아주 좋아합니다. 가장 큰 문제는 내 테이블 길이가 9300 줄이고 정렬에 10-20 초가 걸리는 것입니다. 그래서 나는 다른 스크립트가 이보다 빠르다는 것을 궁금해합니다. 이들은 내가 찾은 것들입니다 :빠른 HTML 표 정렬?

가

http://webfx.eae.net/dhtml/sortabletable/sortabletable.html (심지어 확실하지 않음이 사용하는 것)
http://tablesorter.com/docs/ 이 http://flexigrid.info/ (잔인 함은, 난 그냥 필요 (JS/jQuery를 알고 필요로 확장하기 쉬운 정말 정말 좋은,하지만) 테이블 정렬이 아닌 전체 데이터 조작 프로그램)
http://datatables.net/ (잔인 함은, 내가 원하는 것을 할 수있는 5000 개 다른 프로그램이있을거야)

을 확장 JS/jQuery를 필요로하지만, 나는이 없습니다 알아 내고 빨리 테스트 할 시간. 따라서 StackOverflow에있는 누군가가 빠르게 알고있는 라이브러리를 가리킬 수 있는지 알고 싶습니다. 따라서 하나의 프로그램 만 사용하는 방법을 알아 내면됩니다.

(, BTW 나는 퀵와 밀리 초 단위 숫자의 수천의 자바 정렬 수백 보았다, 사람이 알고리즘 JS.sort()를 사용하는 것 알고 있나요?) 나는 다른 jQuery를 (DataTables으로 큰 성공을 있었다

출처

2012-07-03 Dubslow

jquery로 태그를 붙 였지만 의존성을 피하기를 원했던 것처럼 들립니다. 어떤 방법입니까? –

물론, java는 * numbers *를 빠르게 정렬 할 수 있지만 * DOM *을 정렬합니다. DOM 작업이 느립니다. 문제는 HTML 표에서 9300 개의 행으로 시작됩니다. 나는 서버 쪽을 정렬했다. 하지만 그렇게하고 싶지 않다면, 아마도 JS 오브젝트에 데이터를 저장하고, 정렬하고, 매번 테이블을 다시 렌더링하는 것이 더 빠를 것이다. –

@ 로버트 : 그렇습니다. 나는 그것을 피하고 싶습니다. 그러나 빠른 것이고 필요한 경우 JQuery를 배웁니다. – Dubslow

플러그인)을 말합니다. 당신이 자바에서 보았던 것보다 자바 스크립트에서 볼 수있는 속도의 손실은 실제로 DOM을 렌더링하는 것입니다. 이것은 훨씬 더 많은 작업입니다. DataTables의 장점은 자바 스크립트 배열 (본질적으로 json)에서 데이터를 가져올 수 있다는 것입니다. 그래서 정렬은 배열 (java와 유사한 속도)에서 수행되고 사용자가 볼 필요가있는 부분 만 DOM에 생성됩니다.

는 예는 다음 URL을 참조하십시오 :

http://datatables.net/examples/data_sources/js_array.html

또는

http://datatables.net/examples/data_sources/ajax.html

나는 후자를 사용하는 것이 좋습니다. 그것은 아직 충분히 빠르게 정적 JSON 배열을 사용하지 않는 경우, 당신은 부하 오프 자바 스크립트를 수행하는 서버 측 스크립트를 구축하고자합니다 - 여기에 서버 측 코드와 함께 좋은 예 :

http://datatables.net/examples/data_sources/server_side.html

편집 : 스크롤

무한을

주석에서 설명했듯이 문제는 정렬이 아니라 HTML 테이블을 JS로 변환하고 되돌립니다. 이것은 반환 된 정렬의 렌더링 부분을 사용자가 볼 때로드하는 것만으로 도울 수 있습니다. 서버는 JS에 JSON 양식의 테이블과 동일한 정보를 제공합니다. 이 두 기술은 HTML-JS 변환 및 렌더링 문제를 제거하므로 속도가 크게 향상됩니다.

HTML (이것은 JSON이 따라 오기 전에 처음에 렌더링하는 모든 - 당신은 열이만큼 번째 태그를 추가) :

<table id="table_id"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>etc</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

JQUERY :

$(document).ready(function() { 
    $('#table_id').dataTable({ 
     "bScrollInfinite": true, 
     "bScrollCollapse": true, 
     "sScrollY": "200px", 
     "bProcessing": true, 
     "sAjaxSource": 'array.txt' 
    }); 
});

배열입니다. txt에는 다음이 포함됩니다.

{ "aaData": [ 
    ["This will be in column 1","This in two","this in 3"], 
    ["another row - column 1","another two","another 3"] 
]}

출처

2012-07-03 05:13:58 Chris

그래서 정렬은 어려운 부분이 아니라 HTML의 9300 줄을 배열로 바꾸는 것이 너무 오래 걸리는 것입니까? 그게 바로 첫 번째 링크의 서문이 말하는 것입니다. 이 경우, 이미 사용하고있는 JS를 수정하여 자신의 구문 분석을 수행하지 않는 것이 더 쉽지 않을까요? 편집 : Christian Varga도 그렇게 말했습니까? – Dubslow

자바 스크립트를 실행하기 전에 수천 행의 DOM을 렌더링하는 브라우저가 너무 오래 걸린다. 그런 다음이를 배열로 변환하면 속도가 느려질 것이다. 배열에서 데이터를 제공하고 정렬하고 정렬 한 다음 브라우저에 필요한 행을 렌더링하도록 요청하면 방대한 속도가 증가해야합니다. – Chris

그래, 실제로 가장 오래 걸리는 브라우저의 렌더링입니다.이 jsFiddle : http://jsfiddle.net/wkndw/를 확인하십시오. 내 컴퓨터에서는 300 밀리미터 (profiler에 따라) 이하의 숫자가 생성되고 정렬되고 dom에 추가되지만, 실제로 렌더링되기까지 시간이 오래 걸립니다 (초 영역에서). –

라이브러리 외에도 테이블 정렬은 매우 쉽게 수행 할 수 있습니다.

실제로 행을 정렬하는 데 걸리는 시간은 DOM이 주변 항목을 이동해야하는 시간과 관련하여 무시할 수 있습니다.

최고의 성능을 제공하는 것은 행을 분리하고 필요에 따라 정렬 한 다음 다시 첨부하는 것입니다. 원시 JSON 데이터는 필요 없으며 $ tr을 분리하고 td에서 비교할 값을 잡고 $ tr의 배열을 만들고 원하는 열에 따라이 배열을 정렬 한 다음 tbody에 다시 첨부합니다.

예를 들어,이 기술을 사용하면 1 초 시간에 15 개의 열이 3000 행으로 정렬됩니다. 이는 완전히 실행 가능합니다. 그 성능으로 유일한 문제는 브라우저에 3000 행을 가져 오는 것입니다 ...

출처

2014-10-13 23:28:38

빠른 HTML 표 정렬?

답변

편집 : 스크롤

관련 문제