Как передать идентификатор элемента в файл .js?

Question

Я использую DataTables, и я узнал, как перевести его интерфейс на испанский. Так как я не хочу называть этот перевод код каждый раз я создать представление, которое будет использовать DataTables, я решил сохранить следующий код в отдельный .js файл:

$(document).ready(function() { 
    $('#table_id').DataTable({ 
     "language":{ 
      "lengthMenu":"Mostrar _MENU_ registros por página.", 
      "zeroRecords": "Lo sentimos. No se encontraron registros.", 
      "info": "Mostrando página _PAGE_ de _PAGES_", 
      "infoEmpty": "No hay registros aún.", 
      "infoFiltered": "(filtrados de un total de _MAX_ registros)", 
      "search" : "Búsqueda", 
      "LoadingRecords": "Cargando ...", 
      "Processing": "Procesando...", 
      "SearchPlaceholder": "Comience a teclear...", 
      "paginate": { 
       "previous": "Anterior", 
       "next": "Siguiente", 
       } 
     } 
    }); 
}); 

Тогда я бы назвал этот файл используя яваскрипт тега следующим образом:

<script src="{{URL::asset('DataTables-1.10.7/media/js/dataTables.MX_es.js')}}"></script> 

Я не знаю, как я бы передать соответствующий идентификатор #table_id к этому зову файла .js.

Временное решение, которое я получил к настоящему моменту, состоит в том, чтобы иметь этот идентификатор как фиксированный (#table_id) ... Но что бы я сделал, если бы мне пришлось использовать более одного dataTable внутри представления?

Вот почему мне нужно передать id как переменную, и файл .js должен его поймать.

Как я могу это сделать?

Answer 1

РЕШЕНИЕ 1: Объявите глобальную переменную для идентификатора DataTable и использовать его в файл сценария, это будет работать только для одного DataTable, можно однако использовать массив идентификаторов, объявленных в глобальном масштабе и перебирать их в ваш .js-файл и вызывать свою подпрограмму для каждого идентификатора, если вы хотите, чтобы это работало более чем на один тип данных. Однако использование глобальной переменной не рекомендуется, но это будет делать трюк.

<script> var myGlobalPlaceholder = "#myDatatable"; </script> 
<script src="{{URL::asset('DataTables-1.10.7/media/js/dataTables.MX_es.js')}}"></script> 

РЕШЕНИЕ 2: Так что вам нужно сделать это для более чем одного DataTable на одной странице почему вы не поместите следующий код в отдельный файл .js позволяет сказать initializer.js:

//File: initializer.js: 
    var spanishDatatableInitializer =function(table_id) 
    { 
     $(table).DataTable({ 
       "language":{ 
        "lengthMenu":"Mostrar _MENU_ registros por página.", 
        "zeroRecords": "Lo sentimos. No se encontraron registros.", 
        "info": "Mostrando página _PAGE_ de _PAGES_", 
        "infoEmpty": "No hay registros aún.", 
        "infoFiltered": "(filtrados de un total de _MAX_ registros)", 
        "search" : "Búsqueda", 
        "LoadingRecords": "Cargando ...", 
        "Processing": "Procesando...", 
        "SearchPlaceholder": "Comience a teclear...", 
        "paginate": { 
         "previous": "Anterior", 
         "next": "Siguiente", 
         } 
       } 
      }); 
    } 

А затем включить его в свой файл Посмотреть, как это:

<script type="text/javascript" src="initializer.js"></script> 

И для этой страницы удельная.JS файл вызова этой функции для каждого DataTable идентификатора, который, по вашему мнению:

$(document).ready(function() { 
    spanishDatatableInitializer("#tableId1"); 
    spanishDatatableInitializer("#tableId2"); 
}) 

РЕШЕНИЯ 3: Как было предложен azium, использовать общий префикс имя для DataTable идентификаторов как "#my_datatable_*******" и в файле JS это сделать :

$(document).ready(function() { 
var dataTables = []; 

$("div[id^='#my_datatable_']").each(function(){ 
    // dataTables.push(this.id); // only for testing 
$(this.id).DataTable({ 
     "language":{ 
      "lengthMenu":"Mostrar _MENU_ registros por página.", 
      "zeroRecords": "Lo sentimos. No se encontraron registros.", 
      "info": "Mostrando página _PAGE_ de _PAGES_", 
      "infoEmpty": "No hay registros aún.", 
      "infoFiltered": "(filtrados de un total de _MAX_ registros)", 
      "search" : "Búsqueda", 
      "LoadingRecords": "Cargando ...", 
      "Processing": "Procesando...", 
      "SearchPlaceholder": "Comience a teclear...", 
      "paginate": { 
       "previous": "Anterior", 
       "next": "Siguiente", 
       } 
     } 
    }); 
}); 
}); 

Answer 2

Реальный вопрос: как вы узнаете, какой элемент должен пройти к вашей функции DataTable. Учитывайте следующее:

$(document).ready(function() { 
    $(someVariable).DataTables({ ... }) 
}) 

Вам нужно будет сделать одну из двух вещей. Передайте имя id, которое вы хотите, используя src="..", как вы предложили (не собираетесь работать), или вам нужно будет изменить someVariable. В обоих случаях вам нужно вручную указать код, какой элемент вы хотите, чтобы вы не очень экономили на себе много работы.

Что вы можете сделать, это следовать за каким-то соглашением об именах, так что ваша функция всегда будет соответствовать набору селекторов.

$(document).ready(function() { 
    $('[id^="data-table-"]').DataTables({ ... }) 
}) 

Таким образом, до тех пор, пока ваши таблицы всегда начинаются с «данными-table-», как:

id="data-table-something-something" 

вашей функция будет работать без жесткого кода идентификатора (или нескольких идентификаторов) каждый раз ,