Adding JavaScript and CSS to a particular menu page I have set up a Drupal 7 web site with a few custom blocks and menus written by me.

I have a non-Drupal PHP script displaying users (some of them are external, i.e. not stored in drupal tables) as a table with the DataTables jQuery plugin.

I would like to rewrite that script as a Drupal menu, so that it can be called as http://preferans.de/top.

The content of my.module is the following.

function my_menu() {
  $items['top'] = array (
    'title' =&gt; 'Top',
    'description' =&gt; 'Top',
    'page callback' =&gt; 'my_top_callback',
    'access callback' =&gt; TRUE,
    'file' =&gt; 'my.top.inc',
    'file path' =&gt; drupal_get_path('module', 'my'),
    'type' =&gt; MENU_CALLBACK,
  );
  return $items;
}


The content of my.top.inc is the following.

function my_top_callback() {
  return array (
    'top_table' =&gt; array (
      '#type' =&gt; 'markup',
      '#markup' =&gt; generate_html_table_with_php(),
    ),
  );
}


My problem is that I don't understand how to add the CSS and JavaScript code, so that it is available for the /top page, but not for any other Drupal paths.

I should probably call:

   drupal_add_css('/demo_table_jui.css', 'file');
   drupal_add_css('/smoothness/jquery-ui-1.8.4.custom.css', 'file');
   drupal_add_js('/jquery.dataTables.min.js', 'file');
   drupal_add_js('
       $(document).ready(function() {
         $("#rating").dataTable( {
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
          });
        ', 'inline');


(Please see the head-section of my original non-Drupal script).

How do I limit these calls to the /top page and where should I perform these calls?
Should I put them in a hook, or by adding some properties to my menu?
Generally, CSS and JavaScript files are added with hook_init(), which allows those files to be aggregated together, when aggregation is enabled.

Using hook_init() (I suggest you not to do this, anyway) you could conditionally add the files basing on the page being visited.

function my_init() {
  if (arg(0) == 'top') {
    // Add the files.
  }
}


The reason I don't suggest you to do this is that the hook would be called for every pages, including the ones you are not adding the files. hook_init() is generally used to add files to each page.

You can add those files in the menu callback (a.k.a., the page callback); if the menu callback is a form builder function, then you can use the #attached property, as the following code.

$form['#attached']['css'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.css',
);

$form['#attached']['js'] = array(
  drupal_get_path('module', 'ajax_example') . '/ajax_example.js',
);


About the inline code you are adding, I would recommend you to put also that in a file, and to use Drupal behaviors instead of $(document).ready(). If you need to pass arguments to the JavaScript code, you can use JavaScript settings (see drupal_add_js() to understand in details how to pass settings to JavaScript code).
Managing JavaScript in Drupal 7 explains in details how to manage JavaScript code in Drupal 7, and the section titles Behaviors reports how Drupal behaviors are changed in the latest Drupal version.