datatables 버튼 및 검색 상자 위치

Question

안녕하세요 저는 datatables를 사용하고 있고 부트 스트랩 스타일링을 사용하고 있습니다. 아무도 제 단추 및 검색 상자에 대해 이러한 종류의 레이아웃을 수행하는 방법을 알려주실 수 있습니까?

내가 자바 스크립트

var table = $('#dataTables-example').DataTable({ 
    dom: '<"col-sm-12"B><"col-sm-12"f>t', 
    select: true, 
    scrollY: '80vh', 
    scrollX: true, 
    "autoWidth": false, 
    scrollCollapse : true, 
    paging : false, 
    stateSave : true, 
    order : [[ 0, "asc" ]], 
    buttons: [], 
    language: { 
     buttons : {}, 
     select:{ 
      rows:{ 
       _: "", 
       0: "", 
       1: "" 
      } 
     }, 
     "emptyTable": "Tidak terdapat data di tabel", 
     "info": "", 
     "infoEmpty": "", 
     "infoFiltered": "", 
     "search": "<i class='fa fa-search'></i>", 
     "paginate": { 
      "next":  ">", 
      "previous": "<" 
     }, 
     "zeroRecords": "Tidak ditemukan data yang sesuai", 
    } 
}); 

에서 DOM을 변경하지만,이처럼 얻기 위해 노력했다 (난이보기를 생성하기 위해 어도비 포토샵을 사용하고 있습니다) ... 난 검색을 변경하는 힘든 시간을 보내고 박스 HTML 구조

그냥 datatables 의해 작성된 HTML 구조를 활용할 수

및 .. ... 전체 datatables JQuery와 파일을 이해하려고 노력에

을 힘든 시간을 보내고 만 나는 this을 읽고 난 HTML 코드는 다음과 같이 될 것입니다 생각 다음 HTML 구조 ...

<div class="col-sm-12"> 
     <div class="btn-group"> 
      //the button in here 
     </div> 
    </div> 
    <div class="col-sm-12"> 
     <div class="input-group"> 
      <div class="input-group-addon"><i class="fa fa-search"></i></div> 
      <input type="text" class="form-control" placeholder="search term...." /> 
     </div> 
    </div> 
    <div class="col-sm-12"> 
     //table in here 
    </div> 

Answer 1

시작을 제어 할 수있는 경우 이는 type=search이 적용된 입력에 대한 스타일링에 대한 상당히 엄격한 제한 사항을 설명합니다. DataTables의 검색 상자는 이와 같은 입력입니다.

링크 된 기사에서 가져온 것입니다. 스타일 시트에 다음 CSS를 추가하십시오 :

input[type=search] { 
    -moz-appearance:none; 
    -webkit-appearance:none; 
} 

사용자 에이전트가 검색 상자에서 강제로하는 스타일을 취소해야합니다. 그렇지 않은 경우, 당신은 프로그래밍 text에 search에서 상자의 type을 변경하는 것이 좋습니다 : 당신이에 의존하는 경우

는

$('.datatables_filter input').attr('type', 'text'); 

, 당신은 initComplete 옵션을 때의 기능에 문을 넣을 수 있습니다 당신이 그것을 가지고 도망 칠 수 있다면 DataTable 메쏘드를 호출한다. ("당신의 테이블이 완전히 초기화 되었다면 모든 마크 업이 그려지는지를 문서가 명확히하지 않는다.) 그렇지 않다면, drawCallback 옵션을 사용해야 할 것이다.