페이지 매김 토글이 변경되면 부트 스트랩 테이블 데이터가 재설정됩니다.

클릭하거나 페이지 매기기 변경을 선택할 때 선택한 항목을 한글로 재설정하는 문제가 있습니다.페이지 매김 토글이 변경되면 부트 스트랩 테이블 데이터가 재설정됩니다.

예를 들면. 처음에는 테이블에 ma 데이터를 표시하고 선택 상자에 col을 표시합니다. 표시 할 페이지가 많습니다 (1, 2, 3) 페이지 1에서 선택 상자의 내용을 변경 한 후 페이지 매김 토글을 클릭합니다. 그리고 콘텐츠가 재설정됩니다 (이전에 내 선택을 유지하지 않습니다).

data-maintain-selected="true"

페이지 설정을 변경 한 후에이 내용을 유지할 것으로 예상되지만 그렇지 않습니다. 이 데이터를 보관할 수있는 방법이 있습니까?

도움 주셔서 감사합니다.

<!DOCTYPE html> 
<html> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Untitled</title> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css"> 
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"> 
<link rel="stylesheet" href="assets/css/styles.css"> 
</head> 

<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
<script type="text/javascript"> 
    function pagin() { 
    $("#table").bootstrapTable("togglePagination"); 
    } 
</script> 
<div id="page_body"> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="fpbx-container"> 
      <div class="display full-border"> 
      <button onclick="pagin()"> 
       Pagination On/Off 
      </button> 

      <table id="table" data-show-toggle="True" data-maintain-selected="true" data-pagination="True" class="table table-striped"></table> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>  

</body> 

</html>

로드 중 자바 스크립트.

$('#table').bootstrapTable({ 
columns: [{ 
    field: 'id', 
    title: 'Item ID' 
}, { 
    field: 'name', 
    title: 'Item Name' 
}, { 
    field: 'price', 
    title: 'Item Price' 
}], 
data: [{ 
    id: 1, 
    name: 'Item 1', 
    price: '<select><option value="10">$10</option><option value="20">$20</option></select>' 
}, { 
    id: 2, 
    name: 'Item 2', 
    price: '<select><option value="10">$10</option><option value="20">$20</option></select>' 
}] 
});

JSFiddle : https://jsfiddle.net/fdanard/n0ky502r/3/

누군가가 나에게 도움을 삭제하고 내 스레드를 수정하지 않도록하려면 . :)

출처

2017-12-18 Danard

https://stackoverflow.com/help/mcve – beaver

그것은 이루어집니다하지만 대답을 참조하십시오 코드를 게시하시기 바랍니다. – Danard

maintainSelected는 다음과 같은 체크 박스 선택 유지와 관련이 있습니다. https://jsfiddle.net/beaver71/hgLzx0c0/ – beaver

데이터는 엄격하게 테이블의 데이터 여야합니다. 데이터 열에서 모든 HTML 개체 또는 특수 서식이 설정 포맷터를 사용하여 (데이터 포맷)

function formatForks(value, row, index) { 

    var selectCode = '<select>'; 
    var forksAllowed = [0, 10, 20, 30]; 

    forksAllowed.forEach(function(ii) { 
selectCode += '<option value="' + ii + '"' + (value==ii?' selected ':'') +'>$' + ii + '</option>';

}) 일 수있다;

selectCode += '</select>' 
    return selectCode; 
}

이 JSFiddle를 참조 - note the forksFormatter function

출처

2018-01-28 20:51:26

좋아,하지만이 예제는 페이지 매김 토글을 클릭 할 때 선택된 데이터를 유지합니까? 아니! : – Danard

예 - 업데이트 기능을 추가해야합니다. 예를 들어 선택 상자를 추가하는 적절한 방법을 보여주었습니다. 편집 가능한 확장 프로그램을 사용할 수도 있습니다. –

페이지 매김 토글이 변경되면 부트 스트랩 테이블 데이터가 재설정됩니다.

답변

관련 문제