Как загрузить состояние таблицы DataTables из массива json после отображения таблицы DataTables с другим состоянием таблицы? - PullRequest
Новая
       23

Как загрузить состояние таблицы DataTables из массива json после отображения таблицы DataTables с другим состоянием таблицы?

0 голосов
/ 24 сентября 2018

Я пытаюсь использовать функцию представления состояния datatables , чтобы я мог загрузить определенное состояние таблицы после ее визуализации.

У меня есть следующая таблица ( JSFiddle Here ), которую я создал с помощью datatables.Я бы хотел, чтобы пользователь мог загружать таблицу из определенного представления после ее загрузки 

<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.css"/>



<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/jszip-2.5.0/dt-1.10.16/af-2.2.2/b-1.5.1/b-colvis-1.5.1/b-flash-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/fc-3.2.4/fh-3.1.3/kt-2.3.2/r-2.2.1/rg-1.0.2/rr-1.2.3/sc-1.4.4/sl-1.2.5/datatables.min.js"></script>

</head>

<body>

  <div class="container">
    <div class="row">
      <div class="col-lg-12">

        <table id="example" class="display" style="width:100%">

        <thead>

            <tr>
                <th>Position</th>
                <th>Salary</th>
                <th>Office</th>
                <th>Extn.</th>
            </tr>
        </thead>
        </table>
      </div>
    </div>
  </div>
<script>
  data = [
  {
    DT_RowId: "row_1",
    first_name: "Tiger",
    last_name: "Nixon",
    position: "System Architect",
    email: "t.nixon@datatables.net",
    office: "Edinburgh",
    extn: "5421",
    age: "61",
    salary: "320800",
    start_date: "2011-04-25"
  },
  {
    DT_RowId: "row_2",
    first_name: "Garrett",
    last_name: "Winters",
    position: "Accountant",
    email: "g.winters@datatables.net",
    office: "Tokyo",
    extn: "8422",
    age: "63",
    salary: "170750",
    start_date: "2011-07-25"
  }
];


table = $("#example").DataTable({
  dom: '<"html5buttons"B>lTfgitp',
  data: data,
  select: true,
  stateSave: true,
  stateLoadCallback: function (settings, callback) {
    local_save_state = {'time':1537754768252,'start':0,'length':10,'order':[[0,'desc']],'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true},'columns':[{'visible':true,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}}]}
    callback(local_save_state)
    },
  columns: [
    { data: "first_name",title:'first'},
    { data: "position",title:'secon'},
    { data: "extn" },
    { data: "salary"},
    { data: "age" }
  ],
   buttons: [
    { extend: "colvis", title: document.title }
   ]
});

other_view = {'time':1537754462842,'start':0,'length':10,'order':[[0,'asc']],'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true},'columns':[{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}}]}
r = $("#example").DataTable()
r.state(other_view)


</script>
</body>

</html>

С помощью приведенного выше кода таблица выглядит следующим образом

enter image description here Результат вызова состояния таблиц ниже 

r = $("#example").DataTable()
r.state()
>> {
    'time': 1537754768252,
    'start': 0,
    'length': 10,
    'order': [
        [0, 'desc']
    ],
    'search': {
        'search': '',
        'smart': true,
        'regex': false,
        'caseInsensitive': true
    },
    'columns': [{
        'visible': true,
        'search': {
            'search': '',
            'smart': true,
            'regex': false,
            'caseInsensitive': true
        }
    }, {
        'visible': false,
        'search': {
            'search': '',
            'smart': true,
            'regex': false,
            'caseInsensitive': true
        }
    }, {
        'visible': false,
        'search': {
            'search': '',
            'smart': true,
            'regex': false,
            'caseInsensitive': true
        }
    }, {
        'visible': false,
        'search': {
            'search': '',
            'smart': true,
            'regex': false,
            'caseInsensitive': true
        }
    }, {
        'visible': false,
        'search': {
            'search': '',
            'smart': true,
            'regex': false,
            'caseInsensitive': true
        }
    }]
}

Однако я бы хотел загрузить конкретное представленное ниже представление, используя функцию состояния datatables enter image description here

Приведенный ниже код не обновляет таблицу до нового предпочтительного представления 

preferred_view = {'time':1537754462842,'start':0,'length':10,'order':[[0,'asc']],'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true},'columns':[{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}},{'visible':false,'search':{'search':'','smart':true,'regex':false,'caseInsensitive':true}}]}
r = $("#example").DataTable()
r.state(preferred_view)
...